import React, { useState, useEffect } from 'react';
import { Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, Grid, FormControl } from '@mui/material/';
import { useForm, useFormContext } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import dayjs from 'dayjs';
import { INPUT_DATE_FORMAT } from '@/app/utils/formatUtil';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

interface CompanyHolidayDialogProps {
  open: boolean;
  onClose: () => void;
  title: string;
  actions: React.ReactNode;
  content: Content;
  editable: Boolean;
}

interface Content {
    date: string
}

const CompanyHolidayDialog: React.FC<CompanyHolidayDialogProps> = ({ open, onClose, title, actions, content, editable }) => {
    const { 
        t, 
        i18n: { language },
    } = useTranslation();

    const {
        register,
        formState: { errors },
        setValue, 
    } = useFormContext<any>();

    useEffect(() => {
        setValue("date", content.date);
    }, [content])

    console.log(editable)

    return (
        <LocalizationProvider
            dateAdapter={AdapterDayjs}
            adapterLocale={`${language}-hk`}
        >
        <Dialog open={open} onClose={onClose}>
        <DialogTitle>{title}</DialogTitle>
        <DialogContent>
        <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
                <Grid item xs={12}>
                <TextField
                    disabled={!editable}
                    label={t("Description")}
                    fullWidth
                    {...register("name", {
                    required: "Description required!",
                    })}
                    error={Boolean(errors.name)}
                />
                </Grid>
                <Grid item xs={12}>
            <FormControl fullWidth>
              <DatePicker
                disabled={!editable}
                label={t("Company Holiday")}
                value={dayjs(content.date)}
                onChange={(date) => {
                  if (!date) return;
                  setValue("date", date.format(INPUT_DATE_FORMAT));
                }}
                slotProps={{
                    textField: {
                      helperText: 'MM/DD/YYYY',
                    },
                  }}
              />
            </FormControl>
            </Grid>
        </Grid>
        </DialogContent>
        <DialogActions>{actions}</DialogActions>
        </Dialog>
        </LocalizationProvider>
    );
};

export default CompanyHolidayDialog;