import Pageheader from "@/shared/layout-components/pageheader/pageheader"

import Seo from "@/shared/layout-components/seo/seo"

import { gettingMajlasTypeList } from "@/utils/PDService/majlasType/majlasType"
import { useFormik } from "formik"
import { Fragment, useEffect, useState } from "react"
import { Button, Card, Col, Form, Row } from "react-bootstrap"
import { FormattedMessage, useIntl } from "react-intl"
import SelectField from "@/pages/components/CustomComponents/forms/SelectField";
import InputFeild from "@/pages/components/CustomComponents/forms/InputField"
import { gettingNahiaList } from "@/utils/PDService/nahia/nahia"
import { gettingZoonTypeList } from "@/utils/PDService/zoon"
import { gettingSharidTypeList } from "@/utils/PDService/sharid/sharid"
import { gettingGozarList } from "@/utils/PDService/gozar/gozar"
import DateField from "@/pages/components/CustomComponents/forms/DateField";
import { areaControlMajlasCreateSchema } from
"@/validationSchema/PdService/validationSchema"
import Swal from "sweetalert2"
import { addAreaControlMajlas, deleteAreaControlMajlas,
gettingAreaControlMajlasList, updateAreaControlMajlas } from
"@/utils/PDService/areaControlMajlas/areaControlMajlas"
import { BasicTable } from "@/components/reason/tablefunctionlity"
import { COLUMNS } from "@/shared/data/tablefunctionality"
import { deleteControlMajlas, gettingControlMajlasList, updateControlMajlas } from
"@/utils/PDService/controlMajlas/controlMajlas"
import { toast } from "react-toastify"

const initialValues = {
majlasTypeId: '',
agenda: '',
nahiaId: '',
zoonId: '',
sharidId: '',
gozarId: '',
shora: '',
masjad: '',
time: '',
date: '',
person: '',
totalPerson: '',
observation: '',
}

const AreaControlMajlas = () => {

const intl = useIntl()

const [data, setData] = useState();
const [majlasType, setMajlasType] = useState({ list: [], loading: false });
const [buttonLoader, setButtonLoader] = useState(false)
const [nahia, setNahia] = useState({ list: [], loading: false });
const [zoon, setZoon] = useState({ list: [], loading: false });
const [sharid, setSharid] = useState({ list: [], loading: false });
const [gozar, setGozar] = useState({ list: [], loading: false });
const [refetchList, setRefetchList] = useState(true)
const [itemToDelete, setItemToDelete] = useState<any>(null);
const [editData, setEditData] = useState();
const [updateMode, setUpdateMode] = useState(false)

const fetchMajlasType = async () => {

try {
 setMajlasType({ ...majlasType, loading: true });
const res = await gettingMajlasTypeList();
setMajlasType({ ...majlasType, list: res });
} catch (err) {
console.log(err);
} finally {
// setProvinces({...provinces, loading: false})
}
};

const fetchNahia = async () => {

try {
setNahia({ ...nahia, loading: true });
const res = await gettingNahiaList();
setNahia({ ...nahia, list: res });
} catch (err) {
console.log(err);
}
};
const fetchZoon = async () => {
try {
setZoon({ ...zoon, loading: true });
const res = await gettingZoonTypeList();
setZoon({ ...zoon, list: res });
} catch (err) {
console.log(err);
}
};
const fetchSharid = async () => {
try {
setSharid({ ...sharid, loading: true });
const res = await gettingSharidTypeList();
setSharid({ ...sharid, list: res });
} catch (err) {
console.log(err);
}
};
const fetchGozar = async () => {
try {
setGozar({ ...gozar, loading: true });
const res = await gettingGozarList();
setGozar({ ...gozar, list: res });
} catch (err) {
console.log(err);
}
};

// Table Data fetching

const fetchAreaControlMajlasList = async () => {

const listAreaControlMajlas = await gettingAreaControlMajlasList();
setData(listAreaControlMajlas)

}
const COLUMNS: any = [
{
Header: <FormattedMessage id="number" />,
accessor: "id",
},
{
Header: <FormattedMessage id="majlas-type" />,
accessor: "majlasType.nameDa",
},
{
Header: <FormattedMessage id="agenda" />,
accessor: "agenda",
},
{
Header: <FormattedMessage id="nahia" />,
accessor: "nahia.nameDa",
},
{
Header: <FormattedMessage id="zoon" />,
accessor: "zoon.nameDa",
},
{
Header: <FormattedMessage id="sharid" />,
accessor: "sharid.nameDa",
},
{
Header: <FormattedMessage id="gozar" />,
accessor: "gozar.nameDa",
},
{
Header: <FormattedMessage id="shora" />,
accessor: "shora",
},
{
Header: <FormattedMessage id="masjad" />,
accessor: "masjad",
},
{
Header: <FormattedMessage id="majlas-person" />,
accessor: "person",
},

{
Header: <FormattedMessage id="total-person" />,
accessor: "totalPerson",
},
{
Header: <FormattedMessage id="observation" />,
accessor: "observation",
},

{
Header: <FormattedMessage id="time" />,
accessor: "time",
},
{
Header: <FormattedMessage id="date" />,
accessor: "date",
},
 {
Header: <FormattedMessage id="actions" />,
id: "actions",
Cell: ({ row }: any) => (
<>
<Button
onClick={() => handleEdit(row.original)}
className="btn btn-sm btn-icon"
variant="success"
>
<i className="fe fe-edit"></i>
</Button>
<Button
variant="danger"
className="btn-icon btn btn-sm mx-2"
onClick={() => handleOpenDeleteModal(row.original.id)}
>
<i className="fe fe-trash"></i>
</Button>

</>
),
}
];

// Delete Method

const handleDelete = async (item: any) => {

try {
console.log(item, 'delete ------')
const response: any = await deleteAreaControlMajlas(item);

if (response.status === 204) {

setRefetchList(!refetchList);
} else {
toast.error(<FormattedMessage id="deletion-error" />);
}
} catch (err) {
console.error("Error deleting item:", err);
toast.error(<FormattedMessage id="deletion-error" />);
} finally {
setItemToDelete(null);
}
}

const handleOpenDeleteModal = (item: any) => {

const swalWithBootstrapButtons = Swal.mixin({

customClass: {
confirmButton: 'btn btn-primary me-2',
cancelButton: 'btn btn-primary me-2'
},
buttonsStyling: false
})
swalWithBootstrapButtons.fire({
title: intl.formatMessage({ id: 'are-you-sure' }),
text: intl.formatMessage({ id: 'You won not be able to revert this' }),
icon: 'warning',
showCancelButton: true,
 confirmButtonText: intl.formatMessage({ id: 'yes delete it' }),
confirmButtonColor: "#5ce65c",
cancelButtonText: intl.formatMessage({ id: 'cancel' }),
reverseButtons: true,
}).then((result) => {
if (result.isConfirmed) {
handleDelete(item)
swalWithBootstrapButtons.fire(
{
title: intl.formatMessage({ id: 'deleted' }),
text: intl.formatMessage({ id: 'your file has been deleted'
}),
icon: 'success',
iconColor: '#5ce65c',
confirmButtonText: intl.formatMessage({ id: 'yes' }),
}
// 'Deleted!',
// 'Your file has been deleted.',
// 'success'
)
} else if (result.dismiss === Swal.DismissReason.cancel) {
swalWithBootstrapButtons.fire(
{
title: intl.formatMessage({ id: 'cancelled' }),
text: intl.formatMessage({ id: 'you data is safe' }),
icon: 'error',
confirmButtonText: intl.formatMessage({ id: 'yes' }),
}
// 'Cancelled',
// 'Your imaginary file is safe :)',
// 'error'
)
}
})
};

// Update Section
const handleEdit = (item: any) => {
setEditData(item);
window.scrollTo({
top: 10,
behavior: "smooth",
});
setUpdateMode(true);
};

const formik = useFormik({

initialValues,
validationSchema: areaControlMajlasCreateSchema,
onSubmit: async (values, action) => {
try {
let res: any;
setButtonLoader(true);
if (updateMode) {
res = await updateAreaControlMajlas(values);
console.log(res, 'res--------')
// if (res.status == 200 && res.statusText === "OK") {
 Swal.fire({
title: intl.formatMessage({ id: 'updation-success' }),
icon: 'success',
iconColor: '#5ce65c',
showConfirmButton: true,
confirmButtonText: intl.formatMessage({ id: 'yes' }),
})
setButtonLoader(false);
formik.resetForm();
setUpdateMode(false)
setRefetchList(!refetchList);
// }
// else if (res.response.data.error) {
// setServerErorr(true);
// setButtonLoader(false);
// }
}
else {
res = await addAreaControlMajlas(values);
if (res.status == 201 && res.statusText === "Created") {
Swal.fire({
title: intl.formatMessage({ id: 'submission-
success' }),
icon: 'success',
iconColor: '#5ce65c',
showConfirmButton: true,
confirmButtonText: intl.formatMessage({ id: 'yes' }),
})
setButtonLoader(false);
formik.resetForm();
setRefetchList(!refetchList);

//
router.push(`/app/PdService/controlDepartment/controlMajlas/create`)
}
}
} catch (err) {
console.log(err, "00000000");
}
}
})

useEffect(() => {
fetchMajlasType()
fetchNahia()
fetchZoon()
fetchSharid()
fetchGozar()
}, [])

useEffect(() => {
fetchAreaControlMajlasList()
}, [refetchList])

useEffect(() => {
if (editData) {
formik.setValues(editData);
}
 }, [editData]);

console.log(formik.values, 'values...........')

return (
<Fragment>
<Seo title={"Area Control Majlas"} />
<Pageheader
homepage={<FormattedMessage id="control-department" />}
activepage={<FormattedMessage id="create-area-control-majlas" />}
heading={""}
/>
<div className="main-container container-fluid">
<Row>
<Col xl={12}>
<Card className="custom-card container-fluid">
<Card.Header>
<Card.Title>
<FormattedMessage id="create-area-control-
majlas" />
</Card.Title>
</Card.Header>
<Card.Body>
<div className="card-area" id="collapseExample">
<Form onSubmit={formik.handleSubmit}>
<Row>
<SelectField
labelId="majlas-type"
name="majlasTypeId"
value={
majlasType.list.find(
(option: any) =>
option.id ===
formik.values.majlasTypeId
) || null
}
onChange={(selectedOption) =>
formik.setFieldValue(
"majlasTypeId",
selectedOption ?
selectedOption.id : ""
)
}
onBlur={formik.handleBlur}

options={majlasType.list.map((option: any) => ({

id: option.id,
name_da: option.nameDa,
}))}

touched={formik.touched.majlasTypeId}
error={formik.errors.majlasTypeId}
/>
<InputFeild
labelId="agenda"
name="agenda"
value={formik.values.agenda}
onChange={formik.handleChange}
 touched={formik.touched.agenda}
onBlur={formik.handleBlur}
error={formik.errors.agenda}
/>
<SelectField
labelId="nahia"
name="nahiaId"
value={
nahia.list.find(
(option: any) => option.id
=== formik.values.nahiaId
) || null
}
onChange={(selectedOption) => {
formik.setFieldValue(
"nahiaId",
selectedOption ?
selectedOption.id : ""
);
formik.setFieldValue("zoonId",
"");

formik.setFieldValue("sharidId", "");
formik.setFieldValue("gozarId",
"");
}}
onBlur={formik.handleBlur}
options={nahia.list.map((option:
any) => ({
name_da: option.nameDa,
id: option.id,
}))}
touched={formik.touched.nahiaId}
error={formik.errors.nahiaId}
/>
<SelectField
labelId="zoon"
name="zoon"
value={
zoon.list.find(
(option: any) => option.id
=== formik.values.zoonId
) || null
}
onChange={(selectedOption) => {
formik.setFieldValue(
"zoonId",
selectedOption ?
selectedOption.id : ""
);

formik.setFieldValue("sharidId", "");
formik.setFieldValue("gozarId",
"");
}}
onBlur={formik.handleBlur}
options={zoon.list
?.filter(
(option: any) =>
option.nahiaId.toString() == formik.values.nahiaId
)
.map((option: any) => ({
id: option.id,
name_da: option.nameDa,
}))}
touched={formik.touched.zoonId}
error={formik.errors.zoonId}
/>
<SelectField
labelId="sharid"
name="sharidId"
value={
sharid.list.find(
(option: any) =>
option.id ===
formik.values.sharidId
) || null
}
onChange={(selectedOption) => {
formik.setFieldValue(
"sharidId",
selectedOption ?
selectedOption.id : ""
);
formik.setFieldValue("gozarId",
"");
}}
onBlur={formik.handleBlur}
options={sharid.list
?.filter(
(option: any) =>

option.zoonId.toString() == formik.values.zoonId
)
.map((option: any) => ({
id: option.id,
name_da: option.nameDa,
}))}
touched={formik.touched.sharidId}
error={formik.errors.sharidId}
/>
<SelectField
labelId="gozar"
name="gozarId"
value={
gozar.list.find(
(option: any) => option.id
=== formik.values.gozarId
) || null
}
onChange={(selectedOption) => {
formik.setFieldValue(
"gozarId",
selectedOption ?
selectedOption.id : ""
);
}}
 onBlur={formik.handleBlur}
options={gozar.list
?.filter(
(option: any) =>

option.sharidId.toString() ==
formik.values.sharidId
)
.map((option: any) => ({
id: option.id,
name_da: option.nameDa,
}))}
touched={formik.touched.gozarId}
error={formik.errors.gozarId}
/>
<InputFeild
labelId="shora"
name="shora"
value={formik.values.shora}
onChange={formik.handleChange}
touched={formik.touched.shora}
onBlur={formik.handleBlur}
error={formik.errors.shora}
/>
<InputFeild
labelId="masjad"
name="masjad"
value={formik.values.masjad}
onChange={formik.handleChange}
touched={formik.touched.masjad}
onBlur={formik.handleBlur}
error={formik.errors.masjad}
/>

{/* sdfgsd */}

<InputFeild
labelId="time"
name="time"
value={formik.values.time}
onChange={formik.handleChange}
touched={formik.touched.time}
onBlur={formik.handleBlur}
error={formik.errors.time}
// className="col-12"
type="time"
/>
<DateField
labelId="Date"
name="date"
value={formik.values.date}
error={formik.errors.date}
touched={formik.touched.date}
onBlur={formik.handleBlur}
onChange={(value) =>
formik.setFieldValue("date",
value.target.value)
}
/>
<InputFeild
 labelId="majlas-person"
name="person"
value={formik.values.person}
onChange={formik.handleChange}
touched={formik.touched.person}
onBlur={formik.handleBlur}
error={formik.errors.person}
// className="col-12"
type="person"
/>
<InputFeild
type="number"
labelId="total-person"
name="totalPerson"
value={formik.values.totalPerson}
onChange={formik.handleChange}

touched={formik.touched.totalPerson}
onBlur={formik.handleBlur}
error={formik.errors.totalPerson}
/>
<InputFeild
labelId="observation"
name="observation"
value={formik.values.observation}
onChange={formik.handleChange}

touched={formik.touched.observation}
onBlur={formik.handleBlur}
error={formik.errors.observation}
className="col-md-6 mt-3"
/>
</Row>
{buttonLoader && (
<Button
variant=""
className="btn btn-primary my-1
__next-auth-theme-auto mb-4"
type="button"
disabled
>
<span
className="spinner-grow
spinner-grow-sm me-1"
role="status"
aria-hidden="true"
></span>
<FormattedMessage id="submit-
button" />
...
</Button>
)}
{/* {!buttonLoader && (
<Button
onClick={() =>
formik.handleSubmit()}
className="px-5 my-4"
>
<FormattedMessage id="submit-
button" />
</Button>
)} */}
{!buttonLoader && (
<>
<Button type="submit" className="px-5
my-4">
{updateMode ? (
<FormattedMessage id="update-
button"/>
) : (
<FormattedMessage id="submit-
button"/>
)}
</Button>
<Button
variant=""
className="btn btn-warning px-4 my-
4 m-1"
type="button"
onClick={() => formik.resetForm()}
>
<FormattedMessage id="reset-form"/>
</Button>
</>
)}
</Form>
</div>
</Card.Body>
</Card>
</Col>
</Row>
</div>

{/* Table Content */}

<div className="main-container container-fluid">
<Row>
<Col xl={12}>
<Card className="custom-card container-fluid">
<Card.Header>
<Card.Title>
<FormattedMessage id="list-area-control-majlas"
/>
</Card.Title>
</Card.Header>
<Card.Body>
<div className="table-responsive">
<BasicTable columns={COLUMNS} data={data} />
</div>
</Card.Body>
</Card>
</Col>
</Row>
</div>
</Fragment>
)
}
AreaControlMajlas.layout = "Contentlayout"
export default AreaControlMajlas