import './proj-config-list-mod.css';
import {
    Alert,
    Breadcrumb, Button, Col, Flex, Form, Input,
    message, Modal, Row, Spin,
} from "antd";
import {Link, useNavigate, useParams} from "react-router-dom";
import {useEffect, useState} from "react";
import FaiconSelect from "../../../components/faicon/FaIconSelect.tsx";
import ModField, {IModField} from "../../../components/modfield/ModField.tsx";
import {post} from "../../../util/AjaxUtils.ts";

type FormFieldType = {
    modName: string;
    modDesc: string;
    modIcon: string;
    fields: IModField[];
}

export default function ProjConfigModSave() {
    const nav = useNavigate();
    const pathParams = useParams();
    const [messageApi, contextHolder] = message.useMessage();
    const [form] = Form.useForm<FormFieldType>();
    const [loading, setLoading] = useState<boolean>(false);
    const [isModIconModalOpen, setIsModIconModalOpen] = useState(false);
    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
    const [selectedModIcon, setSelectedModIcon] = useState<string>('fa fa-list');

    const height = window.innerHeight - 180;

    useEffect(() => {
        form.setFieldsValue({
            modIcon: 'fa fa-list'
        })
    }, [])

    return (
        <>
            {contextHolder}
            <Breadcrumb
                items={[
                    {title: <Link to={'/'}>首页</Link>},
                    {title: <Link to={'/proj-create'}>创建项目</Link>},
                    {title: <Link to={`/proj-edit/${pathParams.projId}`}>编辑项目</Link>},
                    {title: <Link to={`/proj-edit/config-mod-list/${pathParams.projId}`}>系统菜单管理</Link>},
                    {title: '添加菜单'},
                ]}
            />
            <div className="mod-edit-container" style={{height: `${height}px`}}>
                <Alert message="菜单指的是系统的功能，最少10个菜单，最多15个菜单" type="info"/>
                <div className="mod-content">
                    <Form
                        name="basic"
                        form={form}
                        layout="vertical"
                        labelCol={{span: 8}}
                        wrapperCol={{span: 24}}
                        style={{width: '100%'}}
                        onFinish={() => {
                            setIsEditModalOpen(true);
                        }}
                        autoComplete="off"
                    >
                        <Row gutter={15}>
                            <Col span={10}>
                                <Form.Item<FormFieldType>
                                    label="菜单名称"
                                    name="modName"
                                    extra="此内容会作为菜单名生成菜单，最多8个字"
                                    rules={[{required: true, message: '请输入菜单名称'}]}
                                >
                                    <Input placeholder="请输入菜单名称" maxLength={8}/>
                                </Form.Item>
                                <Form.Item<FormFieldType>
                                    label="菜单说明"
                                    name="modDesc"
                                    extra="此内容会作为功能描述生成到操作手册中，请详细描述，最多600字"
                                    rules={[{required: true, message: '请输入菜单说明'}]}
                                >
                                    <Input.TextArea placeholder="请输入菜单说明" rows={6} maxLength={600}/>
                                </Form.Item>
                                <Form.Item<FormFieldType>
                                    label="菜单图标"
                                    name="modIcon"
                                    extra="菜单图标会显示在菜单栏中"
                                    rules={[{required: true, message: '请输入菜单图标'}]}
                                >
                                    <Button size="large" onClick={() => {
                                        setIsModIconModalOpen(true);
                                    }}><i className={selectedModIcon}></i></Button>
                                </Form.Item>
                            </Col>
                            <Col span={14}>
                                <Form.Item<FormFieldType>
                                    name="fields"
                                    rules={[{required: true, message: '请添加菜单属性'}]}
                                >
                                    <ModField
                                              isEdit={true}
                                              scrollHeight={height - 380}
                                              handleChange={(dataArray) => {
                                                  if (!dataArray) {
                                                      return;
                                                  }
                                                  form.setFieldValue('fields', dataArray);
                                              }}/>
                                </Form.Item>

                            </Col>
                        </Row>

                        <Form.Item wrapperCol={{span: 24}}>
                            <div style={{paddingTop: '15px'}}>
                                <Flex align="center" justify="center" gap="large">
                                    <Button type="primary"
                                            htmlType="submit"
                                            style={{backgroundColor: 'var(--color-primary)'}}>
                                        保存
                                    </Button>
                                    <Button type="default" htmlType="button" onClick={() => {
                                        nav(-1);
                                    }}>
                                        返回
                                    </Button>
                                </Flex>
                            </div>
                        </Form.Item>
                    </Form>

                </div>
            </div>
            <Modal title="提示"
                   okText="确定"
                   cancelText="取消"
                   open={isEditModalOpen}
                   onOk={() => {
                       setIsEditModalOpen(false);
                       post({
                           messageApi,
                           url: `/api/proj-mod/save`,
                           body: {
                               projId: pathParams.projId,
                               modName: form.getFieldValue('modName'),
                               modDesc: form.getFieldValue('modDesc'),
                               modIcon: form.getFieldValue('modIcon'),
                               fields: form.getFieldValue('fields'),
                           },
                           onBefore() {
                               setLoading(true);
                           },
                           onSuccess() {
                               messageApi.success('添加成功');
                               nav(0);
                           },
                           onFinally() {
                               setLoading(false);
                           }
                       })
                   }}
                   onCancel={() => {
                       setIsEditModalOpen(false);
                   }}>
                <div>确定提交吗？</div>
            </Modal>
            <Modal title="选择图标"
                   footer={false}
                   open={isModIconModalOpen}
                   onCancel={() => {
                       setIsModIconModalOpen(false);
                   }}>
                <div style={{maxHeight: '400px', overflow: 'auto'}}>
                    <FaiconSelect selectedIcon={selectedModIcon}
                                  handleClick={(icon) => {
                                      form.setFieldValue('modIcon', icon);
                                      setSelectedModIcon(icon);
                                  }}
                    />
                </div>
            </Modal>
            <Spin tip="正在提交..." spinning={loading} fullscreen/>
        </>
    )

}