"use client";

import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import FormControl from "@mui/material/FormControl";
import Grid from "@mui/material/Grid";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography";
import { useTranslation } from "react-i18next";
import CardActions from "@mui/material/CardActions";
import RestartAlt from "@mui/icons-material/RestartAlt";
import Button from "@mui/material/Button";
import { Controller, UseFormRegister, useFormContext } from "react-hook-form";
import { CreateCompanyInputs } from "@/app/api/companys/actions";
import { TimePicker } from "@mui/x-date-pickers";
import dayjs from 'dayjs';
import { useEffect } from "react";
import { convertTimeArrayToString } from "@/app/utils/formatUtil";

interface Props{
  content : Content;
}

interface Content {
  normalHourFrom: number[];
  normalHourTo: number[];
  otHourFrom: number[];
  otHourTo: number[];
}

const CompanyDetails: React.FC<Props> = ({
  content,
}) => {
  const { t } = useTranslation();
  const {
    register,
    formState: { errors },
    setValue, 
    getValues,
  } = useFormContext<CreateCompanyInputs>();

  // console.log(content)

  useEffect(() => {
    setValue("normalHourFrom", convertTimeArrayToString(content.normalHourFrom, "HH:mm:ss", false) ?? "09:00:00");
    setValue("normalHourTo", convertTimeArrayToString(content.normalHourTo, "HH:mm:ss", false) ?? "18:00:00");
    setValue("otHourFrom", convertTimeArrayToString(content.otHourFrom, "HH:mm:ss", false) ?? "20:00:00");
    setValue("otHourTo", convertTimeArrayToString(content.otHourTo, "HH:mm:ss", false) ?? "08:00:00");
  }, [content])

  return (
    <Card>
      <CardContent component={Stack} spacing={4}>
        <Box>
          <Typography variant="overline" display="block" marginBlockEnd={1}>
            {t("Company Details")}
          </Typography>
          <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
            <Grid item xs={6}>
              <TextField
                label={t("Company Code")}
                fullWidth
                {...register("companyCode", {
                  required: "Company code required!",
                })}
                error={Boolean(errors.companyCode)}
                helperText={
                  Boolean(errors.companyCode) &&
                  (errors.companyCode?.message
                    ? t(errors.companyCode.message)
                    : t("Please input correct company code"))
                }
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Company Name")}
                fullWidth
                {...register("companyName", {
                  required: "Company name required!",
                })}
                error={Boolean(errors.companyName)}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Company BR NO.")}
                fullWidth
                {...register("brNo", {
                  required: "Please enter a brNo",
                })}
                error={Boolean(errors.brNo)}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Company contact name")}
                fullWidth
                {...register("contactName", {
                  required: "Please enter a contact name",
                })}
                error={Boolean(errors.contactName)}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Company contact number")}
                fullWidth
                {...register("phone", {
                  required: "Please enter a contact number",
                })}
                error={Boolean(errors.phone)}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Company contact email")}
                fullWidth
                {...register("email", {
                  required: "Please enter a contact email",
                })}
                error={Boolean(errors.email)}
              />
            </Grid>
            <Grid item xs={3}>
            <FormControl fullWidth>
              <TimePicker
                label={t("Normal Hour From")}
                defaultValue={content.normalHourFrom !== undefined && content.normalHourFrom !== null ? 
                  dayjs().hour(content.normalHourFrom[0]).minute(content.normalHourFrom[1]) : 
                  dayjs().hour(9).minute(0)}
                onChange={(time) => {
                  console.log(time?.format("HH:mm:ss"))
                  if (!time) return;
                  setValue("normalHourFrom", time.format("HH:mm:ss"));
                }}
                slotProps={{
                    textField: {
                      helperText: 'HH:mm:ss',
                    },
                  }}
              />
            </FormControl>
            </Grid>
            <Grid item xs={3}>
            <FormControl fullWidth>
              <TimePicker
                label={t("Normal Hour To")}
                defaultValue={content.normalHourTo !== undefined && content.normalHourTo !== null ? 
                  dayjs().hour(content.normalHourTo[0]).minute(content.normalHourTo[1]) : 
                  dayjs().hour(18).minute(0)}
                onChange={(time) => {
                  if (!time) return;
                  setValue("normalHourTo", time.format("HH:mm:ss"));
                }}
                slotProps={{
                    textField: {
                      helperText: 'HH:mm:ss',
                    },
                  }}
              />
            </FormControl>
            </Grid>
            <Grid item xs={3}>
            <FormControl fullWidth>
              <TimePicker
                label={t("OT Hour From")}
                defaultValue={content.otHourFrom !== undefined && content.otHourFrom !== null ? 
                  dayjs().hour(content.otHourFrom[0]).minute(content.otHourFrom[1]) : 
                  dayjs().hour(20).minute(0)}
                onChange={(time) => {
                  if (!time) return;
                  setValue("otHourFrom", time.format("HH:mm:ss"));
                }}
                slotProps={{
                    textField: {
                      helperText: 'HH:mm:ss',
                    },
                  }}
              />
            </FormControl>
            </Grid>
            <Grid item xs={3}>
            <FormControl fullWidth>
              <TimePicker
                label={t("OT Hour To")}
                defaultValue={content.otHourTo !== undefined && content.otHourTo !== null ? 
                  dayjs().hour(content.otHourTo[0]).minute(content.otHourTo[1]) : 
                  dayjs().hour(8).minute(0)}
                onChange={(time) => {
                  if (!time) return;
                  setValue("otHourTo", time.format("HH:mm:ss"));
                }}
                slotProps={{
                    textField: {
                      helperText: 'HH:mm:ss',
                    },
                  }}
              />
            </FormControl>
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Company address")}
                fullWidth
                {...register("address", {
                  required: "Please enter a address",
                })}
                error={Boolean(errors.address)}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Company district")}
                fullWidth
                {...register("district", {
                  required: "Please enter a district",
                })}
                error={Boolean(errors.district)}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("currency")}
                fullWidth
                {...register("currency", {
                  required: "Please enter a currency",
                })}
                error={Boolean(errors.currency)}
              />
            </Grid>
          </Grid>
        </Box>
        {/* <CardActions sx={{ justifyContent: "flex-end" }}>
          <Button variant="text" startIcon={<RestartAlt />}>
            {t("Reset")}
          </Button>
        </CardActions> */}
      </CardContent>
    </Card>
  );
};

export default CompanyDetails;