import { ServerSideAutoComplete } from "@/components/auto-complete.

component";
import { TextField } from "@/components/text-field.component/text-field";
import {
ProductForm,
ProductSchemas
} from "@/schemas";
import { ResponseBrandProduct, ResponseProductId, ResponseTaxProduct,
ResponseUnitProduct } from "@/types";
import { getApi } from "@/utils";
import { zodResolver } from "@hookform/resolvers/zod";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import {
default as DialogActions,
default as DialogContent,
} from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle";
import Grid from "@mui/material/Grid";
import Stack from "@mui/material/Stack";
import axios from "axios";
import queryString from "query-string";
import { useForm } from "react-hook-form";
import { queryClient } from "../_app";

interface ModalEdit {
open: boolean;
toggle: () => void;
id: number;
}

const ModalEditProduct = (props: ModalEdit) => {

const { open, toggle, id } = props;

const endpoints = queryString.stringifyUrl({

url: getApi("product"),
});

const form = useForm<ResponseProductId>({

defaultValues: async () => {
const response = await axios.get(`${endpoints}/${id}`);

return response.data.data;
},
resolver: zodResolver(ProductSchemas),
});

const { control, handleSubmit, reset, watch } = form;

const onSubmit = async (data: any) => {

try {
await axios.put(`${endpoints}/${id}`, {
name: data.name,
description: data.description,
barcode: data.barcode,
brand_id: data.brand_id?.label,
category_id: data.category_id,
purchase_price: data.purchase_price,
selling_price: data.selling_price,
 stock: data.stock,
tax_id: data.tax_id,
unit_id: data.unit_id,
status: data.status,
});

queryClient.invalidateQueries({ queryKey: ["LIST_PRODUCT"] });

toggle();
} catch (error) {
console.log(error);
}
};

const handleClose = () => {

toggle();
reset();
};

return (
<Dialog fullWidth maxWidth="md" open={open}>
<DialogTitle fontWeight={600} sx={{ position: "relative" }}>
Edit Produk
</DialogTitle>

<DialogContent dividers>
<Stack spacing={4}>
<Box>
<Grid container spacing={3}>
<Grid item xs={12} md={12}>
<TextField
control={control}
name="product_details.name"
label="Nama Produk"
placeholder="Masukan Nama Produk"
InputLabelProps={{
shrink: true,
}}
/>
</Grid>

<Grid item xs={12} md={12}>

<TextField
control={control}
name="product_details.description"
label="Keterangan"
placeholder="Masukan Keterangan Produk"
multiline
InputLabelProps={{
shrink: true,
}}
/>
</Grid>

<Grid item xs={12} md={4}>

<ServerSideAutoComplete<
ProductForm,
{ id: number; label: string },
ResponseBrandProduct
 >
control={control}
endpoint="category"
name="category_id.label"
label="Kategori"
formatOptions={(response) => {
const options = response.data;

if (!options) return [];

return options.map((option) => ({

id: option.id,
label: option.name,
}));
}}
/>
</Grid>
<Grid item xs={12} md={4}>
<ServerSideAutoComplete<
ProductForm,
{ id: number; label: string },
ResponseBrandProduct
>
control={control}
endpoint="brand"
// value={}
name="brand_id.label"
label="Brand"
formatOptions={(response) => {
const options = response.data;

if (!options) return [];

return options.map((option) => ({

id: option.id,
label: option.name,
}));
}}
/>
</Grid>
<Grid item xs={12} md={4}>
<ServerSideAutoComplete<
ProductForm,
{ id: number; label: string },
ResponseTaxProduct
>
control={control}
endpoint="tax"
name="tax_id.label"
label="Pajak"
formatOptions={(response) => {
const options = response.data;

if (!options) return [];

return options.map((option) => ({

id: option.id,
label: option.name,
}));
 }}
/>
</Grid>
<Grid item xs={12} md={4}>
<ServerSideAutoComplete<
ProductForm,
{ id: number; label: string },
ResponseUnitProduct
>
control={control}
endpoint="unit"
name="unit_id.label"
label="Satuan"
formatOptions={(response) => {
const options = response.data;

if (!options) return [];

return options.map((option) => ({

id: option.id,
label: option.name,
}));
}}
/>
</Grid>
<Grid item xs={12} md={3}>
<TextField
control={control}
name="stock"
type="number"
label="Stok Produk"
placeholder="Masukan Stok "
InputLabelProps={{
shrink: true,
}}
// inputFormat="NUMBER"
/>
</Grid>
<Grid item xs={12} md={2}>
<TextField control={control} name="product_details.barcode"
label="Barcode" />
</Grid>
<Grid item xs={12} md={2}></Grid>
<Grid item xs={12} md={6}>
<TextField
control={control}
name="purchase_price"
label="harga pembelian"
placeholder="Masukan harga beli produk"
type="number"
InputLabelProps={{
shrink: true,
}}
// inputFormat="PRICE"
/>
</Grid>
<Grid item xs={12} md={6}>
<TextField
control={control}
 name="selling_price"
label="harga penjualan"
placeholder="Masukan harga jual produk"
type="number"
InputLabelProps={{
shrink: true,
}}
// inputFormat="PRICE"
/>
</Grid>
</Grid>
</Box>
</Stack>
</DialogContent>

<DialogActions sx={{ display: "flex", justifyContent: "space-between" }}>

<Box sx={{ display: "flex", alignItems: "center" }}>
<Button
onClick={handleSubmit(onSubmit)}
variant="contained"
sx={{ mr: 3 }}
>
Ubah
</Button>
<Button variant="outlined" color="secondary" onClick={handleClose}>
Cancel
</Button>
</Box>
</DialogActions>
</Dialog>
);
};

export default ModalEditProduct;