import React, {useState} from "react";
import {Button, Col, Form, Input, message, Modal, Row, Select, Table, Tag, Typography} from "antd";
import {observer} from "mobx-react-lite";
import {ExclamationCircleOutlined} from "@ant-design/icons";
import {useHistory} from "react-router-dom";
import {capitalize} from "lodash";
import {useStore} from "../utils/useStore";
import {LINKS} from "../routes/app";

const {Title, Text} = Typography;

export const ProductComponent = observer((props) => {
    const store = useStore();
    const [form] = Form.useForm();
    const {Option} = Select;
    const history = useHistory();
    const [idData, setIdData] = useState('');
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [filterSupplier, setFilterSupplier] = useState(null);
    const [filterCategories, setFilterCategories] = useState(null);
    const [filterSubCategories, setFilterSubCategories] = useState(null);

    const handleEditButton = (data) => {
        console.log(data, "isi data")
        form.setFieldsValue({
            name: data.name,
            price: data.price,
            markUpPrice: data.basePrice,
            code: data.code,
            status: data.status,
            subCategoriesId: data.sub_categories.id,
        });
        store.product.visibleModalProduct = true;
        setIdData(data.id);
    }

    const columns = [
        {
            title: "Kode",
            dataIndex: "code",
            key: "code",
        },
        {
            title: "Produk",
            dataIndex: ["name"],
            key: "name",
        },
        {
            title: "Harga Beli",
            dataIndex: ["currentPrice","price"],
            key: ["currentPrice","price"],
        },
        {
            title: "Harga Jual",
            dataIndex:  ["currentPrice","mark_up_price"],
            key:  ["currentPrice","mark_up_price"],
        },
        // {
        //     title: "Gangguan",
        //     dataIndex: "status",
        //     key: "status",
        //     render: (text, record) => (
        //         <Tag
        //             color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
        //             style={{color: "#4F566B"}}
        //         >
        //             {capitalize(record?.status)}
        //         </Tag>
        //     ),
        // },
        {
            title: "Tersedia",
            dataIndex: "tersedia",
            key: "tersedia",
            render: (text, record) => (
                <Tag
                    color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
                    style={{color: "#4F566B"}}
                >
                    {record?.status === "ACTIVE" ? " Tersedia" : "Tidak"}
                </Tag>
            ),
        }
    ];

    const deleteData = async (id) => {
        try {
            console.log(id);
            await store.product.delete(id);
            message.success("Data Berhasil Dihapus");
            history.push(LINKS.PRODUCT);
        } catch (err) {
            console.log("error", err);
            message.error("Gagal menghapus");
        }
    };

    const handleDelete = (id) => {
        Modal.confirm({
            title: "Are you sure delete this record?",
            icon: <ExclamationCircleOutlined/>,
            okText: "Yes",
            okType: "primary",
            cancelText: "Cancel",
            onOk() {
                return deleteData(id);
            },
            onCancel() {
                console.log("Cancel");
            },
        });
    };

    const handleCancel = () => {
        setIdData('')
        store.product.visibleModalProduct = false;
    }

    const handleSubmit = async (data) => {
        console.log(data, "isi data2")
        if (idData !== '') {
            setConfirmLoading(true);
            try {
                await store.product.update(idData, data)
                message.success("Success Update Data Member")
            } catch (e) {
                message.error("Failed Update Data Member")
            }
            setConfirmLoading(false);
            store.product.visibleModalProduct = false;
            setIdData('');
            form.resetFields();
        } else {
            setConfirmLoading(true);
            try {
                await store.product.create(data)
                message.success("Success Add New Member")
            } catch (e) {
                console.log(e, "apa errornya")
                message.error("Failed Add Member")
            }
            setConfirmLoading(false);
            store.product.visibleModalProduct = false;
            setIdData('');
            form.resetFields();
        }
    }

    const handleRemoveFilter = async () => {
        store.product.filterSupplier = null;
        store.product.filterSubCategory = null;
        setFilterSupplier(null);
        setFilterCategories(null);
        setFilterSubCategories(null);
        await store.product.getData();
        store.product.visibleModalFilterProduct = false;
    };

    const handleCancelFilter = () => {
        setFilterSupplier(null);
        setFilterCategories(null);
        setFilterSubCategories(null);
        store.product.visibleModalFilterProduct = false;
    };

    const handleSubmitFilter = async () => {
        store.product.filterSupplier = filterSupplier;
        store.product.filterSubCategory = filterSubCategories;
        await store.product.getData();
        store.product.visibleModalFilterProduct = false;
    };

    const footerLayoutFilter = [
        <Button key={'remove'} onClick={handleRemoveFilter} style={{
            backgroundColor: '#e74e5e', color: '#fff'
        }}>Remove Filter</Button>,
        <Button key={'cancel'} onClick={handleCancelFilter}>Cancel</Button>,
        <Button key={'submit'} onClick={handleSubmitFilter} style={{
            backgroundColor: '#4e79e7', color: '#fff'
        }}>Apply</Button>
    ]

    return (
        <div>
            <Table
                style={{textAlign: "center"}}
                columns={columns}
                dataSource={store.product.data}
                bordered
                pagination={{
                    pageSize: store.product.pageSize,
                    total: store.product.total_data,
                    current: store.product.page + 1,
                    showSizeChanger: true,
                    simple: false
                }}
                onChange={async (page) => {
                    let pageNumber = page.current;
                    store.product.pageSize = page.pageSize;
                    store.product.page = pageNumber - 1;
                    // store.membership.isLoading = true;
                    await store.product.getData();
                    // store.membership.isLoading = false;
                }}
            />

            <Modal
                visible={store.product.visibleModalProduct}
                title={idData ? "Edit Product" : "Create a new Product"}
                okText={idData ? "Edit" : "Create"}
                cancelText="Cancel"
                onCancel={() => {
                    form.resetFields();
                    handleCancel();
                }}
                onOk={() => {
                    form
                        .validateFields()
                        .then((values) => {
                            console.log(values, "isi form")
                            handleSubmit(values);
                            form.resetFields();
                        })
                        .catch((info) => {
                            console.error("Validate Failed:", info);
                        });
                }}
            >
                <Form
                    form={form}
                    layout="vertical"
                >
                    <Form.Item
                        name="name"
                        label="Name"
                        rules={[{required: true, message: "Please input name!"}]}
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        name="price"
                        label="Price"
                        rules={[{required: true, message: "Please input price!"}]}
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        name="markUpPrice"
                        label="Mark Up Price"
                        rules={[{required: true, message: "Please input mark up price!"}]}
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        name="code"
                        label="Code"
                        rules={[{required: true, message: "Please input code!"}]}
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        name="status"
                        label="Status"
                        rules={[{required: true, message: "Please select Status!"}]}
                    >
                        <Select placeholder="Select Sub Category" allowClear>
                            <Option value="ACTIVE">ACTIVE</Option>
                            <Option value="INACTIVE">INACTIVE</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        name="subCategoriesId"
                        label="Sub categories"
                        rules={[{required: true, message: "Please select sub categories!"}]}
                    >
                        <Select placeholder="Select Sub Category" allowClear>
                            {store.product.dataSubCategories.map((item) => (
                                <Option value={item.id} key={item.id}>
                                    {item.name}
                                </Option>
                            ))}
                        </Select>
                    </Form.Item>
                </Form>
            </Modal>

            <Modal
                visible={store.product.visibleModalFilterProduct}
                title={"Filter"}
                footer={footerLayoutFilter}
            >
                <Row>
                    <Col span={24}>
                        <Title level={5} type={"secondary"} strong>Filter Supplier</Title>
                        <Select
                            mode={"multiple"}
                            placeholder="Choose Supplier"
                            onChange={(val) => {
                                setFilterSupplier(val);
                            }}
                            style={{marginBottom: "20px", width: "100%"}}
                        >
                            {store.supplier.data.map((item) => (
                                <Option value={item.id} key={item.id}>
                                    {item.name}
                                </Option>
                            ))}
                        </Select>
                    </Col>
                    <Col span={24}>
                        <Title level={5} type={"secondary"} strong>Filter Categories</Title>
                        <Select
                            mode={"multiple"}
                            placeholder="Choose Category"
                            onChange={async (val) => {
                                setFilterCategories(val);
                                store.product.filterByCategory = val;
                                await store.product.getDataSubCategories();
                            }}
                            style={{marginBottom: "20px", width: "100%"}}
                        >
                            {store.category.data.map((item) => (
                                <Option value={item.id} key={item.id}>
                                    {item.name}
                                </Option>
                            ))}
                        </Select>
                    </Col>
                    <Col span={24}>
                        <Title level={5} type={"secondary"} strong>Filter Sub-Categories</Title>
                        <Select
                            mode={"multiple"}
                            placeholder="Choose Sub-Category"
                            onChange={(val) => {
                                setFilterSubCategories(val);
                            }}
                            style={{marginBottom: "20px", width: "100%"}}
                        >
                            {store.product.dataSubCategories.map((item) => (
                                <Option value={item.id} key={item.id}>
                                    {item.name}
                                </Option>
                            ))}
                        </Select>
                    </Col>
                </Row>
            </Modal>
        </div>
    );
});