import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import { Descriptions, Divider, Space, Spin, Typography } from 'antd';
import Link from 'antd/lib/typography/Link';
import { memo, useEffect, useState } from 'react';
import { useIntl, useRequest } from 'umi';
import { getAppDetail } from '../server';
import UserLink from '../UserInfo/link';
import style from './index.less';
interface AppInfoDescriptionProps {
  /**
   * @description appId
   */
  appId: number;
  /**
   * @description title 默认标题 应用信息
   */
  title?: string | JSX.Element;
  /**
   * @description 简洁模式
   */
  simple?: boolean;
  /**
   * @description  ant desgin  Descriptions 其余属性 包括 column(几列)
   */
  [key: string]: any;
}
const AppInfoDescriptions = (props: AppInfoDescriptionProps) => {
  const { appId, title, simple = false, ...restProps } = props;
  const { formatMessage } = useIntl();
  const [more, setMore] = useState(false);
  const { Text } = Typography;
  const { data, run, loading } = useRequest(() => getAppDetail(appId), {
    manual: true,
  });
  useEffect(() => {
    if (appId) {
      run();
    }
  }, [appId, run]);
  return (
    <Spin spinning={loading}>
      <Descriptions
        className={style.descriptions}
        {...restProps}
        title={title ?? formatMessage({ id: 'base.app.info.descriptions' })}
      >
        <Descriptions.Item
          label={formatMessage({ id: 'base.app.info.descriptions.name' })}
          labelStyle={{ whiteSpace: 'nowrap' }}
          contentStyle={{ minWidth: 200 }}
        >
          <Text ellipsis={{ tooltip: true }}>{data?.name}</Text>
        </Descriptions.Item>
        <Descriptions.Item
          label={formatMessage({ id: 'base.app.info.descriptions.domain' })}
          labelStyle={{ whiteSpace: 'nowrap' }}
          contentStyle={{ minWidth: 200 }}
        >
          <Text ellipsis={{ tooltip: true }}>{data?.domain}</Text>
        </Descriptions.Item>
        <Descriptions.Item
          label={formatMessage({ id: 'base.app.info.descriptions.remark' })}
          labelStyle={{ whiteSpace: 'nowrap' }}
          contentStyle={{ minWidth: 200 }}
        >
          <Text ellipsis={{ tooltip: true }}>
            <span>{data?.intro}</span>
          </Text>
        </Descriptions.Item>
        {!simple && (
          <>
            <Descriptions.Item
              label={formatMessage({ id: 'base.app.info.descriptions.creator' })}
              labelStyle={{ whiteSpace: 'nowrap' }}
              contentStyle={{ minWidth: 200 }}
            >
              <Text ellipsis={{ tooltip: true }}>
                <UserLink
                  user={{
                    nameZh: data?.ownerName,
                    account: data?.nameEn,
                    state: data?.userState,
                  }}
                />
              </Text>
            </Descriptions.Item>
            <Descriptions.Item label={formatMessage({ id: 'base.app.info.descriptions.manager' })}>
              {more ? (
                <Space split={<Divider type={'vertical'} style={{ margin: 0 }} />} wrap>
                  {data?.manager?.map?.((item: any) => (
                    <UserLink
                      key={item.id}
                      user={{
                        nameZh: item?.nameZh,
                        account: item?.account,
                        state: item?.state,
                      }}
                    />
                  ))}

                  <Link onClick={() => setMore(false)}>
                    {formatMessage({ id: 'base.common.collapse' })}
                    <CaretUpOutlined />
                  </Link>
                </Space>
              ) : (
                <Space split={<Divider type={'vertical'} style={{ margin: 0 }} />} wrap>
                  <UserLink
                    user={{
                      nameZh: data?.manager?.[0]?.nameZh,
                      account: data?.manager?.[0]?.account,
                      state: data?.manager?.[0]?.state,
                    }}
                  />

                  {data?.manager?.length > 1 && (
                    <Link onClick={() => setMore(true)}>
                      {formatMessage({ id: 'base.common.expand.more' })}
                      <CaretDownOutlined />
                    </Link>
                  )}
                </Space>
              )}
            </Descriptions.Item>
          </>
        )}
      </Descriptions>
    </Spin>
  );
};
export default memo(AppInfoDescriptions);