import React, {Fragment, useEffect, useRef, useState} from 'react';
import { useSelector, useDispatch } from 'react-redux';
import {
    Avatar,
    Button,
    Card,
    Flex,
    Grid,
    Group,
    Modal,
    Popover,
    ScrollArea,
    Text, TextInput,
    Title,
    useMantineTheme
} from '@mantine/core';
import my_zen from "../../img/my-zen-black.svg";
import {useDisclosure} from "@mantine/hooks";
import TimePicker from "../ui/TimePicker";
import {IconCalendarEvent, IconCalendarMonth} from "@tabler/icons-react";
import {Calendar} from "@mantine/dates";
import {createMyZen} from "./store/myZenSlice";
import dayjs from "dayjs";
import {showNotification} from "@mantine/notifications";


const formatDate = (date) => {
    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    const day = date.getDate();
    const month = months[date.getMonth()];
    const year = date.getFullYear();
    //timezone
    var timezone_offset_minutes = date.getTimezoneOffset();
    timezone_offset_minutes = timezone_offset_minutes == 0 ? 0 : timezone_offset_minutes;

    return `${day}-${month}-${year}`;
};

const MyZenAddButton = () => {
    const dispatch = useDispatch()
    const {loggedUserId} = useSelector((state) => state.auth.user)
    const [myZenModalOpen, { open: openMyZenModal, close: closeMyZenModal }] = useDisclosure(false);

    const [opened, setOpened] = useState(false);
    const [selectedDate, setSelectedDate] = useState( null );

    //submited date

    var [submittedData, setSubmittedData] = useState({})
    const handleSelect = (date) => {
        setSelectedDate(date);

        var formatedDate = dayjs(date).format('YYYY-MM-DD');

        setSubmittedData({
            ...submittedData,
            end_date: formatedDate,
            start_date: formatedDate
        })

    };

    const handleCurrentDate = (date) => {
        setSelectedDate(null);
        var formatedDate = dayjs(date).format('YYYY-MM-DD');

        setSubmittedData({
            ...submittedData,
            end_date: formatedDate,
            start_date: formatedDate
        })
    }

    const [startTime, setStartTime] = useState( null);
    const [endTime, setEndTime] = useState(null);


    const handleTimePicker = (e) => {

        //submittedData start_time, end_time
        setSubmittedData({
            ...submittedData,
            [e.target.name]: e.target.value
        })
    }

    const inputHandler = (e) => {
        setSubmittedData({
            ...submittedData,
            [e.target.name]: e.target.value
        })
    }

    useEffect(() => {
        if(myZenModalOpen===false){

            if(submittedData && Object.keys(submittedData).length>0 && submittedData.name!==''){
                dispatch(createMyZen({...submittedData, 'user_id': loggedUserId })).then((response) => {
                    if(response.payload && response.payload.status && response.payload.status === 200){
                        showNotification({
                            id: 'load-data',
                            loading: true,
                            title: 'My Zen',
                            message: response.payload && response.payload.message && response.payload.message,
                            autoClose: 2000,
                            disallowClose: true,
                            color: 'green',
                        });
                    }
                    if (response.payload && response.payload.status && response.payload.status !== 200) {
                        showNotification({
                            id: 'load-data',
                            loading: true,
                            title: 'Project',
                            message: response.payload && response.payload.message && response.payload.message,
                            autoClose: 2000,
                            disallowClose: true,
                            color: 'red',
                        });
                    }
                });
            }
        }
    }, [myZenModalOpen]);

    return (
        <>
            <Avatar
                onClick={openMyZenModal}
                src={my_zen}
                stroke={1.25}
                size={24} />


            { myZenModalOpen &&
                <Modal.Root
                    opened={myZenModalOpen}
                    onClose={closeMyZenModal}
                    centered
                    size={`xl`}
                    classNames={{
                        header: '!px-[24px] !py-[16px]',
                        body: '!px-[24px] !pb-[24px]',
                        content: 'my-zen-content',
                    }}
                >
                    <Modal.Overlay />
                    <Modal.Content radius={15}>
                        <Modal.Header>
                            <Modal.CloseButton />
                        </Modal.Header>
                        <Modal.Body >
                            <Card className={`!bg-[#EBF1F4]`} withBorder padding={`lg`} radius="md">
                                <Card.Section withBorder inheritPadding py="md">
                                    <Group justify="space-between">
                                        <TextInput name={`name`} className={`w-full`} placeholder="Title here" onChange={(e)=>{
                                            inputHandler(e)
                                        }} />
                                    </Group>
                                </Card.Section>
                                <Card.Section withBorder inheritPadding py="md">
                                    <Group justify="space-between">
                                        <Grid className={`w-full`}>
                                            <Grid.Col span={6}>
                                                <Flex
                                                    mih={50}
                                                    height={`h-full`}
                                                    gap="md"
                                                    justify="flex-start"
                                                    align="flex-end"
                                                    direction="row"
                                                    wrap="wrap"
                                                    className={`w-full h-full`}
                                                >
                                                    <Button onClick={() => {
                                                        handleCurrentDate(new Date())
                                                    }}
                                                        size={`sm`}
                                                        style={{
                                                            backgroundColor: `${selectedDate?'#ffffff':'#39758D'}`,
                                                            color: `${selectedDate?'#39758D':'#ffffff'}`,
                                                        }}
                                                        >Today</Button>
                                                    <Popover position="bottom" withArrow shadow="md" opened={opened} onChange={setOpened}>
                                                        <Popover.Target>
                                                            {selectedDate ? (
                                                                    <Button onClick={() => setOpened((o) => !o)}
                                                                            className={`!bg-white !text-[#39758D]`} size={`sm`}>
                                                                        {formatDate(selectedDate)}
                                                                    </Button>
                                                                ) : (
                                                                <Button onClick={() => setOpened((o) => !o)}
                                                                        className={`!bg-white`} size={`sm`}>
                                                                    <IconCalendarMonth

                                                                        size={24} color={`#39758D`}  />
                                                                </Button>
                                                            )}



                                                        </Popover.Target>
                                                        <Popover.Dropdown>
                                                            <Calendar
                                                                getDayProps={(date) => ({
                                                                    onClick: () => {
                                                                        var sDate=date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()
                                                                        var currentHourMin = new Date().getHours() + ':' + new Date().getMinutes();
                                                                        handleSelect(date)
                                                                    },
                                                                })}
                                                            />
                                                        </Popover.Dropdown>
                                                    </Popover>
                                                </Flex>
                                            </Grid.Col>
                                            <Grid.Col span={3}>
                                                <Text>Start time</Text>
                                                <TimePicker name="start_time" value={startTime} onChange={(e)=> {
                                                        setStartTime(e.target.value)
                                                    handleTimePicker(e)
                                                }} />

                                            </Grid.Col>
                                            <Grid.Col span={3}>
                                                <Text>End time</Text>
                                                <TimePicker name="end_time" value={endTime} onChange={(e)=> {
                                                    setEndTime(e.target.value)
                                                    handleTimePicker(e)
                                                }} />
                                            </Grid.Col>
                                        </Grid>
                                    </Group>
                                </Card.Section>


                            </Card>

                            <Card>
                                <Card.Section withBorder >
                                    <Group justify="space-between">
                                        <Flex
                                            mih={50}
                                            height={`h-full`}
                                            gap="md"
                                            justify="flex-end"
                                            align="flex-end"
                                            direction="row"
                                            wrap="wrap"
                                            className={`w-full h-full pb-[2px]`}
                                        >
                                            <Button variant="outline" color="orange">End</Button>
                                            <Button variant="filled" color="orange">Start</Button>

                                        </Flex>
                                    </Group>
                                </Card.Section>


                            </Card>
                        </Modal.Body>
                    </Modal.Content>
                </Modal.Root>
            }
        </>


    );
};

export default MyZenAddButton;