import React from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { Layout, message, Button } from 'antd';
import { useRecoilState } from 'recoil';
import { PlusOutlined } from '@easyv/react-icons';

import { NameEdit, ProjectCard } from '@/pages/ProjectManage/components';
import { BackButton } from '@/components';
import { _globalLoadingInfo } from '@/pages/module';
import { useProject } from '@/pages/ProjectManage/module';

import { ProjectTemplatePageParams, useProjectTemplateList } from './module';

export interface ProjectTemplateProp {}

const ProjectTemplate: React.FC<ProjectTemplateProp> = function () {
  const navigate = useNavigate();
  const { groupId } = useParams<ProjectTemplatePageParams>();

  const [, setLoadingInfo] = useRecoilState(_globalLoadingInfo);

  const { templateList } = useProjectTemplateList();
  const { createProjectReq, copyProject } = useProject();

  const handleCreateProjectClick = () => {
    createProjectReq.mutate(
      {
        groupId: groupId as ProjectTemplatePageParams['groupId'],
      },
      {
        onSuccess: (info) => {
          message.success('创建成功');
          navigate(`/project-editor/${info?.projectId}`);
        },
      },
    );
  };

  return (
    <Layout className="!h-[100vh]">
      <Layout.Header className="!flex !items-center">
        <BackButton className="!text-xl text-white" onClick={() => navigate('/')} />
      </Layout.Header>
      <Layout.Content className="px-10 py-4">
        <div className="grid gap-6 grid-cols-[repeat(auto-fill,minmax(258px,1fr))]">
          <div
            className="cursor-pointer h-45 rounded flex flex-col justify-center items-center gap-y-2 border border-dashed border-textColorSecondary bg-bgColorBase rounded hover:text-primary hover:border-primary transition-all group"
            onClick={handleCreateProjectClick}>
            <PlusOutlined className="anticon text-2xl" />
            空模版
          </div>
        </div>
        <div>
          <div className="py-4">模板</div>
          <div className="grid gap-6 grid-cols-[repeat(auto-fill,minmax(258px,1fr))]">
            {templateList.map((item) => (
              <ProjectCard
                key={item.id}
                dataSource={item}
                footer={<NameEdit disabledEdit initValue={item.name} />}
                extendRender={
                  <div className="h-full flex flex-col justify-center items-center">
                    <Button
                      type="primary"
                      onClick={async () => {
                        setLoadingInfo({
                          loading: true,
                          tip: '创建项目...',
                        });
                        const info = await copyProject(
                          {
                            id: item.id,
                            groupId,
                          },
                          false,
                        );

                        setLoadingInfo({
                          loading: false,
                          tip: null,
                        });
                        message.success('创建成功');

                        info && navigate(`/project-editor/${info?.projectId}`);
                      }}>
                      创建
                    </Button>
                  </div>
                }
              />
            ))}
          </div>
        </div>
      </Layout.Content>
    </Layout>
  );
};

export default ProjectTemplate;