const { updateTaskTitle, updateTaskDescription, editTaskTitle, editTaskDescription, onChangeShowEditTaskDialog, functionLoader, onEditTaskTitle, onEditTaskDescription, editTaskTitleStatus, editTaskDescriptionStatus, editTaskId, task, editTaskDialogTaskId, onChangeShowDeleteTaskDialog } = props; const OverlayContainer = styled.div` left: 12px; right: 12px; bottom: 0px; top: 40px; position: absolute; z-index: 20; display: flex; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; `; const PopupContainer = styled.div` position: relative; background-color: #1d1d21; padding: 1rem; border-radius: 8px; width: 489px; `; const Text = styled.div` display: flex; column-gap: 0.5rem; align-items: center; color: #fff; font-family: Helvetica Neue; font-size: 24px; font-style: normal; font-weight: 500; line-height: 120% margin-bottom: 1rem; `; const Input = styled.input` color: #fff; width: 50%; height: 40px; padding: 8px 60px 8px 16px; margin-top: 1rem; margin-bottom: 1rem; border-radius: 4px; background-color: #0e0e10; border: none; `; const CloseButton = styled.div` color: #fff; :hover { color: #5765f2; } position: absolute; right: 1rem; cursor: pointer; `; const DeleteButton = styled.div` color: #fff; :hover { color: #5765f2; } position: absolute; right: 3rem; cursor: pointer; `; const InputContainer = styled.div` display: flex; flex-direction: row; `; const titleStatus = editTaskTitleStatus.find(s => s.id = editTaskDialogTaskId); const descriptionStatus = editTaskDescriptionStatus.find(s => s.id = editTaskDialogTaskId); return ( <OverlayContainer> <PopupContainer> <DeleteButton onClick={() => onChangeShowDeleteTaskDialog(true, editTaskDialogTaskId)}> <i class="bi bi-trash-fill"></i> </DeleteButton> <CloseButton onClick={() => onChangeShowEditTaskDialog(false)}> <i class="bi bi-x-lg"></i> </CloseButton> <Text>Task details</Text> <InputContainer> <Input onChange={onEditTaskTitle} value={editTaskTitle} onBlur={updateTaskTitle} on placeholder="Title"/> {titleStatus && titleStatus.id === editTaskDialogTaskId && <Text>{titleStatus.status}</Text> } </InputContainer> <InputContainer> <Input onChange={onEditTaskDescription} value={editTaskDescription} onBlur={updateTaskDescription} placeholder="Description"/> {descriptionStatus && descriptionStatus.id === editTaskDialogTaskId && <Text>{descriptionStatus.status}</Text> } </InputContainer> </PopupContainer> </OverlayContainer> );