import { MyBetaModalFormProps, renderTextHelper } from '@/common';
import { MyModal } from '@/components/MyModal';
import { Apis } from '@/gen/Apis';
import { QuestionsTypeEnum } from '@/gen/Enums';
import { ProCard, ProDescriptions } from '@ant-design/pro-components';
import { Space, Spin } from 'antd';
import { useState } from 'react';

export default function SurveysListShow(props: MyBetaModalFormProps) {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState<any>({});

  return (
    <MyModal
      title={props.title || '查看问卷'}
      type={props.item?.type || 'primary'}
      width="800px"
      trigger={props?.trigger}
      onOpen={() => {
        if (props?.item?.id) {
          setLoading(true);
          Apis.Survey.Surveys.Show({ id: props.item.id })
            .then((res) => {
              setData(res?.data || {});
            })
            .finally(() => {
              setLoading(false);
            });
        }
      }}
      node={
        <Space direction="vertical" style={{ width: '100%' }}>
          <ProCard extra={props.extra}>
            <Spin spinning={loading}>
              <ProDescriptions column={3}>
                <ProDescriptions.Item label="问卷名称" span={1}>
                  <Space size="large">
                    <div>{data?.name}</div>
                  </Space>
                </ProDescriptions.Item>
                <ProDescriptions.Item label="问卷描述" span={2}>
                  {data?.description || '-'}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="问卷题目" span={3}>
                  <Space
                    size="large"
                    direction="vertical"
                    style={{ width: '100%' }}
                  >
                    {data?.questions_with_order?.length > 0
                      ? data?.questions_with_order?.map(
                          (item: any, index: number) => (
                            <ProCard
                              key={index}
                              bordered
                              size="small"
                              style={{ width: '100%' }}
                            >
                              <Space
                                direction="vertical"
                                style={{ width: '100%' }}
                              >
                                <Space>
                                  <renderTextHelper.Tag
                                    Enums={QuestionsTypeEnum}
                                    value={item?.type}
                                    key="type"
                                  />
                                  {''}
                                  <span>
                                    题目{item?.category_id}:{item?.title || '-'}
                                  </span>
                                  {''}
                                  <span
                                    style={{ color: 'red', fontSize: '12px' }}
                                  >
                                    {item?.required ? '[必答]' : '[非必答]'}
                                  </span>
                                </Space>
                                {item?.placeholder ? (
                                  <div>
                                    <strong>提示：</strong>
                                    {item?.placeholder || '-'}
                                  </div>
                                ) : null}
                              </Space>
                            </ProCard>
                          ),
                        )
                      : '-'}
                  </Space>
                </ProDescriptions.Item>
                <ProDescriptions.Item label="创建时间">
                  {data?.created_at || '-'}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="更新时间">
                  {data?.updated_at || '-'}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="是否启用">
                  {data?.is_enabled ? '是' : '否'}
                </ProDescriptions.Item>
              </ProDescriptions>
            </Spin>
          </ProCard>
        </Space>
      }
    />
  );
}