"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 Grid from "@mui/material/Grid";
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, useFormContext } from "react-hook-form";
import { CustomerFormInputs } from "@/app/api/customer/actions";
import { CustomerType } from "@/app/api/customer";
import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
import ContactInfo from "./ContactInfo";
import { useCallback } from "react";

interface Props {
    customerTypes: CustomerType[],
}

const CustomerInfo: React.FC<Props> = ({
    customerTypes,
}) => {
    const { t } = useTranslation();
    const {
        register,
        formState: { errors, defaultValues },
        control,
        reset,
        resetField,
        setValue
    } = useFormContext<CustomerFormInputs>();

    const resetCustomer = useCallback(() => {
        console.log(defaultValues)
        if (defaultValues !== undefined) {
            resetField("code")
            resetField("name")
            resetField("address")
            resetField("district")
            resetField("typeId")
            resetField("brNo")

            // setValue("code", defaultValues.code ?? "")
            // reset({
            //     code: defaultValues.code,
            //     name: defaultValues.name,
            //     address: defaultValues.address,
            //     district: defaultValues.district,
            //     typeId: defaultValues.typeId,
            //     brNo: defaultValues.brNo
            // })
        }
    }, [defaultValues])

    return (
        <>
            <Card sx={{ display: "block" }}>
                <CardContent component={Stack} spacing={4}>
                    <Box>
                        <Typography variant="overline" display="block" marginBlockEnd={1}>
                            {t("Customer Info")}
                        </Typography>
                        <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
                            <Grid item xs={6}>
                                <TextField
                                    label={`${t("Customer Code")}*`}
                                    fullWidth
                                    {...register("code", {
                                        required: true,
                                    })}
                                    error={Boolean(errors.code)}
                                    helperText={Boolean(errors.code) && (errors.code?.message ? t(errors.code.message) : t("Please input correct customer code"))}
                                />
                            </Grid>
                            <Grid item xs={6}>
                                <TextField
                                    label={`${t("Customer Name")}*`}
                                    fullWidth
                                    {...register("name", {
                                        required: true,
                                    })}
                                    error={Boolean(errors.name)}
                                    helperText={Boolean(errors.name) && t("Please input correct customer name")}
                                />
                            </Grid>
                            <Grid item xs={6}>
                                <TextField
                                    label={t("Customer Address")}
                                    fullWidth
                                    {...register("address")}
                                />
                            </Grid>
                            <Grid item xs={6}>
                                <TextField
                                    label={t("Customer District")}
                                    fullWidth
                                    {...register("district")}
                                />
                            </Grid>
                            {/* <Grid item xs={6}>
                            <TextField
                                label={t("Customer Email")}
                                fullWidth
                                {...register("email", {
                                    pattern: /^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})$/,
                                })}
                                error={Boolean(errors.email)}
                                helperText={Boolean(errors.email) && t("Please input correct customer email")}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <TextField
                                label={t("Customer Phone")}
                                fullWidth
                                {...register("phone")}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <TextField
                                label={t("Customer Contact Name")}
                                fullWidth
                                {...register("contactName")}
                            />
                        </Grid> */}
                            <Grid item xs={6}>
                                <FormControl fullWidth>
                                    <InputLabel>{t("Customer Type")}</InputLabel>
                                    <Controller
                                        defaultValue={customerTypes[0].id}
                                        control={control}
                                        name="typeId"
                                        render={({ field }) => (
                                            <Select label={t("Project Category")} {...field}>
                                                {customerTypes.map((type, index) => (
                                                    <MenuItem
                                                        key={`${type.id}-${index}`}
                                                        value={type.id}
                                                    >
                                                        {t(type.name)}
                                                    </MenuItem>
                                                ))}
                                            </Select>
                                        )}
                                    />
                                </FormControl>
                            </Grid>
                            <Grid item xs={6}>
                                <TextField
                                    label={t("Customer Br No.")}
                                    fullWidth
                                    {...register("brNo", {
                                        pattern: /[0-9]{8}/,
                                    })}
                                    error={Boolean(errors.brNo)}
                                    helperText={Boolean(errors.brNo) && t("Please input correct customer br no.")}
                                />
                            </Grid>
                        </Grid>
                    </Box>
                    <CardActions sx={{ justifyContent: "flex-end" }}>
                        <Button onClick={resetCustomer} variant="text" startIcon={<RestartAlt />}>
                            {t("Reset")}
                        </Button>
                    </CardActions>
                </CardContent>
            </Card>
            <ContactInfo />
        </>
    );
};

export default CustomerInfo;