import React from "react";
import { Row, Col, Input, Button, message } from "kts-components-antd-x3";
import { Form, Drawer } from "kts-xui";
import { Invoice, IGood } from "../../../..";
import { getSN } from "../../../tools/itemName";
import { LineAttributeType } from "../../../InvoiceController";

export default function AddComparisonDrawer() {

    const [form] = Form.useForm();

    /** 控制器 */
    const controller = Invoice.useInvoiceController();

    /** 正在 添加商品对照 的货物索引 */
    const addComparisonIndex = controller.useMemo(s => s.goodsListState?.addComparisonIndex, []);

    /** 货物字典 */
    const goodsMap = controller.useMemo(s => s.goodsListState.goodsMap, []);

    /** 正在 对照 的货物 */
    const good = React.useMemo(() => addComparisonIndex ? goodsMap.get(addComparisonIndex) : undefined, [addComparisonIndex]);

    /** 关闭对照 */
    const onClose = React.useCallback(controller.pipeline<any>(async s => { s.goodsListState.addComparisonIndex = undefined }), [controller]);

    /** 提交数据 */
    const onSubmit = React.useCallback(() => {
        controller.run(async s => {
            if (!good) return
            
            try {
                const values = await form.validateFields()
                const shorthand = s.goodsListState.isMyShow ? getSN(good.itemNameSelf)?.shorthand : getSN(good.itemName)?.shorthand;
                const setGood = (good: IGood) => {
                    good.itemCode = values.itemCode;
                    good.itemCodeSelf = values.itemCodeSelf;
                    good.itemName = shorthand ? `*${shorthand}*${values.itemName}` : values.itemName;
                    good.itemNameSelf = shorthand ? `*${shorthand}*${values.itemNameSelf}` : values.itemNameSelf;

                    if (good.lineAttribute !== LineAttributeType.折扣行) {
                        good.itemModelName = values.itemModelName;
                        good.itemModelNameSelf = values.itemModelNameSelf;
                    }
                }

                setGood(good);

                if (good.lineAttribute !== LineAttributeType.正常) {
                    const c = good.lineAttribute === LineAttributeType.折扣行 ? -1 : good.lineAttribute === LineAttributeType.被折扣行 ? 1 : 0
                    const g = s.goodsListState.goodsList[s.goodsListState.goodsList.indexOf(good) + c]
                    setGood(g);
                }

                s.goodsListState.addComparisonIndex = undefined;
                s.goodsListState.goodsList = [...s.goodsListState.goodsList];

                message.success('商品映射成功');
            } catch (error) {

            }
        })
    }, [form, good])

    React.useEffect(() => {
        form.resetFields();
        if (good) {
            form.setFieldsValue({
                ...good,
                itemName: getSN(good.itemName)?.full,
                itemNameSelf: getSN(good.itemNameSelf)?.full,
            })
        }
    }, [good])

    return (
        <Drawer
            width={500}
            onClose={onClose}
            placement="right"
            title="商品映射"
            visible={!!good}
            footer={
                <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10 }} >
                    <Button type="primary" onClick={onSubmit} >提交</Button>
                    <Button onClick={onClose} >取消</Button>
                </div>
            }
        >
            {
                !!good &&
                <Form layout="vertical" style={{ flex: 1 }} form={form} >
                    <Row gutter={[8, 8]} >
                        {/* <Col span={12}>
                            <Form.Item
                                name="itemCodeSelf"
                                label="我方商品编码"
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={12} >
                            <Form.Item
                                name="itemCode"
                                label="对方商品编码"
                            >
                                <Input />
                            </Form.Item>
                        </Col> */}
                        <Col span={12} >
                            <Form.Item
                                name="itemNameSelf"
                                label="我方商品名称"
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={12} >
                            <Form.Item
                                name="itemName"
                                label="对方商品名称"
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={12} >
                            <Form.Item name='itemModelNameSelf' label="我方规格型号">
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={12} >
                            <Form.Item name="itemModelName" label="对方规格型号">
                                <Input />
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            }
        </Drawer>
    )
}

// function validateFields(form: WrappedFormUtils<any>) {
//     return new Promise<{ err: any, values: any }>(resolve => {
//         form.validateFields((err, values) => {
//             resolve({ err, values })
//         })
//     })
// }