import './proj-edit-step.css';
import {Breadcrumb, Col, Flex, message, Modal, Row, Spin} from "antd";
import {Link, useNavigate, useParams} from "react-router-dom";
import {useEffect, useState} from "react";
import {get, put} from "../../../util/AjaxUtils.ts";
import {Button, Form} from 'antd';
import {AxiosResponse} from "axios";
import CardImgSelect, {ImgSelect} from "../../../components/card/CardImgSelect.tsx";
import {ILoginpageList} from "../../../interfaces/loginpage/ILoginpage.ts";

type FieldType = {
    loginpageId: string
};

export default function ProjEditStep6() {
    const nav = useNavigate();
    const pathParams = useParams();
    const [messageApi, contextHolder] = message.useMessage();
    const [form] = Form.useForm<FieldType>();
    const [loading, setLoading] = useState<boolean>(false);
    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
    const [loginpageArray, setLoginpageArray] = useState<ImgSelect[]>([]);
    const [selectedLoginpageId, setSelectedLoginpageId] = useState('');

    const height = window.innerHeight - 180;

    const listLoginpage = () => {
        return new Promise<ILoginpageList[]>(resolve => {
            get({
                messageApi,
                url: '/api/loginpage/list',
                onSuccess({data}) {
                    resolve(data);
                }
            })
        })
    }

    useEffect(() => {
        get({
            messageApi,
            url: `/api/proj/get/edit-step6/${pathParams.projId}`,
            onSuccess({data}: AxiosResponse) {
                setSelectedLoginpageId(data.loginpageId);
                listLoginpage().then(loginpages => {
                    loginpages.forEach(item => {
                        loginpageArray.push({
                            id: item.loginpageId,
                            title: item.pageTitle,
                            imgs: item.previewImgs,
                            selected: item.loginpageId == data.loginpageId
                        })
                    })
                    setLoginpageArray([
                        ...loginpageArray
                    ]);
                })
            }
        })

    }, [])

    return (
        <>
            {contextHolder}
            <Breadcrumb
                items={[
                    {title: <Link to={'/'}>首页</Link>},
                    {title: <Link to={'/proj-create'}>创建项目</Link>},
                    {title: <Link to={`/proj-edit/${pathParams.projId}`}>编辑项目</Link>},
                    {title: '选择登录页面'},
                ]}
            />
            <div className="form-container" style={{height: `${height}px`}}>
                <div className="form-body">
                    <Form
                        name="basic"
                        form={form}
                        layout="vertical"
                        labelCol={{span: 8}}
                        wrapperCol={{span: 24}}
                        style={{width: '800px'}}
                        onFinish={() => {
                            setIsEditModalOpen(true);
                        }}
                        autoComplete="off"
                    >
                        <Row gutter={15}>
                            {
                                loginpageArray.map(item => {
                                    return (
                                        <Col span={8} key={item.id} style={{textAlign: 'center'}}>
                                            <CardImgSelect
                                                id={item.id}
                                                title={item.title}
                                                imgs={item.imgs}
                                                selected={item.selected}
                                                handleClick={() => {
                                                    setSelectedLoginpageId(item.id);
                                                    loginpageArray.forEach(loginpage => {
                                                        loginpage.selected = loginpage.id == item.id;
                                                    })
                                                    setLoginpageArray([
                                                        ...loginpageArray
                                                    ])
                                                }}
                                            />
                                        </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);
                       put({
                           messageApi,
                           url: `/api/proj/update/edit-step6/${pathParams.projId}`,
                           body: {
                               loginpageId: selectedLoginpageId,
                           },
                           onBefore() {
                               setLoading(true);
                           },
                           onSuccess() {
                               messageApi.open({
                                   type: 'success',
                                   content: '编辑成功'
                               })
                           },
                           onFinally() {
                               setLoading(false);
                           }
                       })
                   }}
                   onCancel={() => {
                       setIsEditModalOpen(false);
                   }}>
                <div>确定提交吗？</div>
            </Modal>
            <Spin tip="正在提交..." spinning={loading} fullscreen/>
        </>
    )

}