import CalendarEdit from '@/components/icons/CalendarEdit';
import { convertToJalali } from '@/helper';
import { Button, Popover } from '@mui/material'
import { DatePicker } from 'jalaali-react-date-picker'
import React, { useState } from 'react'

function DateBirthday({ data, changeData }) {

    const [anchorEl, setAnchorEl] = useState(null);

    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };

    const handleClose = () => {
        setAnchorEl(null);
    };

    const open = Boolean(anchorEl);
    const id = open ? 'simple-popover' : undefined;

    return (
        <div className='w-full'>
            <div
                className="relative w-full border cursor-pointer py-[15px] px-[16px] border-solid border-[#D7D7D7] rounded-[8px] h-[48px]"
                onClick={handleClick}
            >
                <p className='text-[#7E7E7E] text-[14px] font-normal cursor-pointer'>{data.value}</p>
                <Button
                    className="!absolute !left-[8px] !top-1/2 !-translate-y-1/2 !min-w-fit !p-1"
                >
                    <CalendarEdit />
                </Button>
            </div>
            <Popover
                id={id}
                open={open}
                anchorEl={anchorEl}
                onClose={handleClose}
                anchorOrigin={{
                    vertical: 'bottom',
                    horizontal: 'right',
                }}
                transformOrigin={{
                    vertical: 'top',
                    horizontal: 'right',
                }}
                sx={{
                    '& .MuiPaper-root': {
                        padding: '12px',
                        background: '#FAFAFA !important',
                        borderRadius: '16px',
                        border: '1px solid #E9ECEF',
                        boxShadow: '0px 2px 28.4px 0px rgba(112, 112, 112, 0.28)'
                    },
                }}
            >
                <DatePicker
                    locale='fa'
                    onChange={e => {
                        changeData(convertToJalali(e._d), 'value', 'date_of_birth');
                        handleClose();
                    }}
                />
            </Popover>
        </div>
    )
}

export default DateBirthday