import React, { useEffect, useRef, useState } from 'react';
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
import { Box, Checkbox, Grid, Typography } from '@mui/material';
import { convertDateToStringWithoutTime } from 'common/helpers/convertDateToString';

import { ProgressBar } from './ProgressBar/ProgressBar';
import {
    buttonStyles,
    buttonTextStyles,
    seeMoreStyles,
    taskDateStyles,
    taskDescriptionStyles,
    taskNameStyles,
    taskWrapperStyles,
} from './styles';

interface TaskProps {
    name: string;
    description: string;
    deadline: Date;
    progress: number;
    isDone: boolean;
    isNew: boolean;
}

const TWO_DAYS_IN_MILLISECONDS = 2 * 24 * 60 * 60 * 1000;

const getDateColor = (deadline: Date) => {
    const now = new Date();
    const timeLeft = deadline.getTime() - now.getTime();
    if (timeLeft < 0) {
        return 'red';
    } else if (timeLeft <= TWO_DAYS_IN_MILLISECONDS) {
        return 'orange';
    } else {
        return 'gray';
    }
};

export const Task: React.FC<TaskProps> = ({ name, description, deadline, progress, isDone, isNew }) => {
    const [progressState, setProgressState] = useState(progress);
    const [isTaskDone, setIsTaskDone] = useState(isDone);
    const [isTaskNew, setIsTaskNew] = useState(isNew);
    const [isSliderVisible, setIsSliderVisible] = useState(false);
    const taskRef = useRef<HTMLDivElement>();
    const date = convertDateToStringWithoutTime(deadline);
    const [taskWidth, setTaskWidth] = useState(taskRef.current?.clientWidth ?? 0);

    // adaptive design
    useEffect(() => {
        const updateTaskWidth = () => {
            setTaskWidth(taskRef.current?.clientWidth ?? 0);
        };
        setTaskWidth(taskRef.current?.clientWidth ?? 0);
        window.addEventListener('resize', updateTaskWidth);
        return () => window.removeEventListener('resize', updateTaskWidth);
    }, []);

    useEffect(() => {
        progressState === 100 && setIsTaskDone(true);
    }, [progressState]);

    const handleMouseEnter = () => {
        if (isTaskNew) {
            setIsTaskNew(false);
            // update task in db
        }
    };

    const handleBtnClick = () => {
        setIsTaskDone((prev) => !prev);
        // update task in db
    };

    const handleSeeMore = () => {
        // open modal
    };

    return (
        <Box onMouseEnter={handleMouseEnter} sx={taskWrapperStyles(isTaskNew)} ref={taskRef}>
            {/* top */}
            <Grid container justifyContent="space-between" mb={2}>
                {/* name */}
                <Grid item xs={4}>
                    <Typography sx={taskNameStyles}>{name}</Typography>
                </Grid>
                {/* date */}
                <Grid item minWidth="7rem" display="flex" color={isTaskDone ? 'gray' : getDateColor(deadline)}>
                    <Typography sx={taskDateStyles}>{date}</Typography>
                    <CalendarMonthIcon />
                </Grid>
                {/* progress */}
                <ProgressBar
                    progress={progressState}
                    setProgress={setProgressState}
                    isSliderVisible={isSliderVisible}
                    setIsSliderVisible={setIsSliderVisible}
                    isTaskDone={isTaskDone}
                    isTaskNew={isTaskNew}
                />
                {/* button */}
                <Grid item>
                    <Box sx={buttonStyles}>
                        <Checkbox color="success" checked={isTaskDone} onChange={handleBtnClick} />
                        <Typography sx={buttonTextStyles}>Mark as done</Typography>
                    </Box>
                </Grid>
            </Grid>
            {/* middle */}
            <Grid container justifyContent="space-between">
                {/* description (48 because of 24px * 2 paddings)*/}
                <Box sx={taskDescriptionStyles(taskWidth - 48)}>{description}</Box>
                {/* see more */}
                <Typography sx={seeMoreStyles} onClick={handleSeeMore}>
                    See more
                </Typography>
            </Grid>
        </Box>
    );
};