"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 { CreateInvoiceInputs } from "@/app/api/invoices/actions";
import { LocalizationProvider, DatePicker } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import dayjs from "dayjs";
import { InvoiceInformation } from "@/app/api/invoices/actions";
import { INPUT_DATE_FORMAT } from "@/app/utils/formatUtil";
import React, { useCallback, useEffect, useMemo, useState } from "react";

interface Props {
  invoiceinfo: InvoiceInformation
}

const InvoiceDetails: React.FC<Props> = ({
  invoiceinfo,
}) => {
  const { 
    t,
    i18n: { language },
  } = useTranslation();
  const {
    register,
    formState: { errors },
    control,
    setValue, 
    getValues,
  } = useFormContext<InvoiceInformation>();

  useEffect(() => {
    // const invoiceDate = getValues("invoiceDate");
    // const dueDate = getValues("dueDate");
    setValue("invoiceDate", dayjs(invoiceinfo.invoiceDate).format(INPUT_DATE_FORMAT))
    setValue("dueDate", dayjs(invoiceinfo.dueDate).format(INPUT_DATE_FORMAT))
  }, [invoiceinfo,]);

  return (
    <Card>
      <CardContent component={Stack} spacing={4}>
        <Box>
          <Typography variant="overline" display="block" marginBlockEnd={1}>
            {t("Invoice Information")}
          </Typography>
          <LocalizationProvider
            dateAdapter={AdapterDayjs}
            adapterLocale={`${language}-hk`}
          >
          <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
          <Grid item xs={6}>
              <TextField
                label={t("Client")}
                fullWidth
                disabled
                defaultValue={invoiceinfo.client}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Address")}
                fullWidth
                disabled
                defaultValue={invoiceinfo.address}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Attention")}
                fullWidth
                disabled
                defaultValue={invoiceinfo.attention}
              />
            </Grid>
            <Grid item xs={6}>
            <FormControl fullWidth>
              <DatePicker
                label={t("Invoice Date")}
                value={dayjs(invoiceinfo.invoiceDate)}
                onChange={(date) => {
                  if (!date) return;
                  setValue("invoiceDate", date.format(INPUT_DATE_FORMAT));
                }}
              />
            </FormControl>
            </Grid>
            <Grid item xs={6}>
            <FormControl fullWidth>
              <DatePicker
                label={t("Due Date")}
                value={dayjs(invoiceinfo.dueDate)}
                onChange={(date) => {
                  if (!date) return;
                  setValue("dueDate", date.format(INPUT_DATE_FORMAT));
                }}
              />
            </FormControl>
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Project ref no.")}
                fullWidth
                disabled
                defaultValue={invoiceinfo.projectRefNo}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Amount (HKD)")}
                fullWidth
                {...register("amount", {
                  required: "Amount required!",
                })}
                error={Boolean(errors.amount)}
              />
            </Grid>
          </Grid>
          </LocalizationProvider>
        </Box>
        {/* <CardActions sx={{ justifyContent: "flex-end" }}>
          <Button variant="text" startIcon={<RestartAlt />}>
            {t("Reset")}
          </Button>
        </CardActions> */}
      </CardContent>
    </Card>
  );
};

export default InvoiceDetails;