import './proj-config-list-mod.css';
import {
    Alert,
    Button, Col, Flex, Form, Input,
    message, Row,
} from "antd";
import {  useNavigate, useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import ModField, { IModField } from "../../../components/modfield/ModField.tsx";
import { get } from "../../../util/AjaxUtils.ts";
import { MAX_MOD_SIZE, MAX_MOD_SIZE_FREE, MIN_MOD_SIZE, MIN_MOD_SIZE_FREE } from "./ProjConfigModList.tsx";

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

type PropsType = {
    isFree?: boolean;
}

export default function ProjConfigModShow(props: PropsType) {
    const nav = useNavigate();
    const pathParams = useParams();
    const [messageApi, contextHolder] = message.useMessage();
    const [form] = Form.useForm<FormFieldType>();
    const [selectedModIcon, setSelectedModIcon] = useState<string>('fa fa-list');
    const [fields, setFields] = useState<IModField[]>([]);
    const minSize = props.isFree ? MIN_MOD_SIZE_FREE : MIN_MOD_SIZE;
    const maxSize = props.isFree ? MAX_MOD_SIZE_FREE : MAX_MOD_SIZE;

    const height = window.innerHeight - 210;

    useEffect(() => {
        get<any>({
            messageApi,
            url: `api/proj-mod/get/${pathParams.projModId}`,
            onSuccess({ data }) {
                form.setFieldsValue({
                    projId: data.projId,
                    modName: data.modName,
                    modDesc: data.modDesc,
                    modIcon: data.modIcon,
                    fields: data.fields,
                });
                setSelectedModIcon(data.modIcon);
                setFields(data.fields)
            }
        })
    }, [])

    return (
        <>
            {contextHolder}
            {/* <Breadcrumb
                items={[
                    {title: <Link to={'/'}>首页</Link>},
                    {title: <Link to={'/proj-create'}>创建项目</Link>},
                    {
                        title: <a onClick={() => {
                            if(props.isFree) {
                                nav(`/proj-efree/${pathParams.projId}`)
                            } else {
                                `/proj-edit/${pathParams.projId}`
                            }
                        }}>编辑项目</a>
                    },
                    {
                        title: <a onClick={() => {
                            nav(-1);
                        }}>系统菜单管理</a>
                    },
                    {title: '查看菜单'},
                ]}
            /> */}
            <div className="mod-edit-container" style={{ height: `${height}px`, marginTop: '17px' }}>
                <div style={{ height: `${height}px`, overflow: 'auto' }}>
                    <Alert message={`菜单指的是系统的功能，最少${minSize}个菜单，最多${maxSize}个菜单`} type="info" />
                    <div className="mod-content" >
                        <Form
                            name="basic"
                            form={form}
                            layout="vertical"
                            labelCol={{ span: 8 }}
                            wrapperCol={{ span: 24 }}
                            style={{ width: '100%' }}
                            autoComplete="off"
                        >
                            <Row gutter={15}>
                                <Col span={10}>
                                    <Form.Item<FormFieldType>
                                        label="菜单名称"
                                        name="modName"
                                        extra="此内容会作为菜单名生成菜单，最多8个字"
                                        rules={[{ required: true, message: '请输入菜单名称' }]}
                                    >
                                        <Input placeholder="请输入菜单名称" maxLength={8} readOnly />
                                    </Form.Item>
                                    <Form.Item<FormFieldType>
                                        label="菜单说明"
                                        name="modDesc"
                                        extra="此内容会作为功能描述生成到操作手册中，请详细描述，最多600字"
                                        rules={[{ required: true, message: '请输入菜单说明' }]}
                                    >
                                        <Input.TextArea placeholder="请输入菜单说明" rows={6} maxLength={600} readOnly />
                                    </Form.Item>
                                    <Form.Item<FormFieldType>
                                        label="菜单图标"
                                        name="modIcon"
                                        extra="菜单图标会显示在菜单栏中"
                                        rules={[{ required: true, message: '请输入菜单图标' }]}
                                    >
                                        <Button size="large"><i className={selectedModIcon}></i></Button>
                                    </Form.Item>
                                </Col>
                                <Col span={14}>
                                    <Form.Item<FormFieldType>
                                        name="fields"
                                        rules={[{ required: true, message: '请添加菜单属性' }]}
                                    >
                                        <ModField modFiledArray={fields}
                                            isEdit={false}
                                            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="default"   size='large' htmlType="button" onClick={() => {
                                            nav(-1);
                                           
                                        }}>
                                            返回
                                        </Button>
                                    </Flex>
                                </div>
                            </Form.Item>
                        </Form>

                    </div>
                </div>
            </div>
        </>
    )

}