"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 { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
import ContactInfo from "./ContactInfo";
import { useCallback } from "react";
import { SubsidiaryType } from "@/app/api/subsidiary";

interface Props {
    subsidiaryTypes: SubsidiaryType[],
}

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

    const resetSubsidiary = useCallback(() => {
        if (defaultValues !== undefined) {
            resetField("code")
            resetField("name")
            resetField("address")
            resetField("district")
            resetField("typeId")
            resetField("brNo")
        }
    }, [defaultValues])

    return (
        <>
            <Card sx={{ display: "block" }}>
                <CardContent component={Stack} spacing={4}>
                    <Box>
                        <Typography variant="overline" display="block" marginBlockEnd={1}>
                            {t("Subsidiary Info")}
                        </Typography>
                        <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
                            <Grid item xs={6}>
                                <TextField
                                    label={`${t("Subsidiary 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 Subsidiary code"))}
                                />
                            </Grid>
                            <Grid item xs={6}>
                                <TextField
                                    label={`${t("Subsidiary Name")}*`}
                                    fullWidth
                                    {...register("name", {
                                        required: true,
                                    })}
                                    error={Boolean(errors.name)}
                                    helperText={Boolean(errors.name) && t("Please input correct Subsidiary name")}
                                />
                            </Grid>
                            <Grid item xs={6}>
                                <TextField
                                    label={t("Subsidiary Address")}
                                    fullWidth
                                    {...register("address")}
                                />
                            </Grid>
                            <Grid item xs={6}>
                                <TextField
                                    label={t("Subsidiary District")}
                                    fullWidth
                                    {...register("district")}
                                />
                            </Grid>
                            <Grid item xs={6}>
                                <FormControl fullWidth>
                                    <InputLabel>{t("Subsidiary Type")}</InputLabel>
                                    <Controller
                                        defaultValue={subsidiaryTypes[0].id}
                                        control={control}
                                        name="typeId"
                                        render={({ field }) => (
                                            <Select label={t("Project Category")} {...field}>
                                                {subsidiaryTypes.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("Subsidiary Br No.")}
                                    fullWidth
                                    {...register("brNo", {
                                        pattern: /[0-9]{8}/,
                                    })}
                                    error={Boolean(errors.brNo)}
                                    helperText={Boolean(errors.brNo) && t("Please input correct subsidiary br no.")}
                                />
                            </Grid>
                        </Grid>
                    </Box>
                    <CardActions sx={{ justifyContent: "flex-end" }}>
                        <Button onClick={resetSubsidiary} variant="text" startIcon={<RestartAlt />}>
                            {t("Reset")}
                        </Button>
                    </CardActions>
                </CardContent>
            </Card>
            <ContactInfo />
        </>
    );
};

export default SubsidiaryInfo;