import LabelValue from '@/components/LabelValue';
import { useComputingResource } from '@/hooks/resource';
import { ServiceVersionData } from '@/pages/ModelDeployment/types';
import { getGitUrl } from '@/utils';
import { formatDate } from '@/utils/date';
import { Link } from '@umijs/max';
import { Col, Row } from 'antd';
import ServiceRunStatusCell from '../ModelDeployStatusCell';
import styles from './index.less';

type BasicInfoProps = {
  info?: ServiceVersionData;
};

function BasicInfo({ info }: BasicInfoProps) {
  const getResourceDescription = useComputingResource()[2];

  // 格式化环境变量
  const formatEnvText = () => {
    if (!info?.env_variables || Object.keys(info.env_variables).length === 0) {
      return '--';
    }
    const env = info.env_variables;
    return Object.entries(env)
      .map(([key, value]) => `${key}: ${value}`)
      .join('\n');
  };

  const formatCodeConfig = () => {
    if (info && info.code_config && info.code_config.code_path) {
      const { code_path, branch } = info.code_config;
      const url = getGitUrl(code_path, branch);
      return (
        <a href={url} target="_blank" rel="noreferrer">
          {info?.code_config?.show_value}
        </a>
      );
    }
    return '--';
  };

  const formatResource = () => {
    if (info && info.resource) {
      return getResourceDescription(info.resource);
    }
    return undefined;
  };

  const formatModel = () => {
    if (info && info.model) {
      const model = info.model;
      const path = `/dataset/model/info/${model.id}?version=${model.version}&name=${model.name}&owner=${model.owner}&identifier=${model.identifier}`;
      return <Link to={path}>{info?.model?.show_value}</Link>;
    }
    return undefined;
  };

  return (
    <div className={styles['basic-info']}>
      <Row gutter={40} style={{ marginBottom: '20px' }}>
        <Col span={10}>
          <LabelValue label="服务名称：" value={info?.service_name}></LabelValue>
        </Col>
        <Col span={10}>
          <LabelValue label="版本名称：" value={info?.version}></LabelValue>
        </Col>
      </Row>
      <Row gutter={40} style={{ marginBottom: '20px' }}>
        <Col span={10}>
          <LabelValue label="代码配置" value={formatCodeConfig()}></LabelValue>
        </Col>
        <Col span={10}>
          <LabelValue label="镜　　像：" value={info?.image}></LabelValue>
        </Col>
      </Row>
      <Row gutter={40} style={{ marginBottom: '20px' }}>
        <Col span={10}>
          <LabelValue label="状　　态：" value={ServiceRunStatusCell(info?.run_state)}></LabelValue>
        </Col>
        <Col span={10}>
          <LabelValue label="模　　型：" value={formatModel()}></LabelValue>
        </Col>
      </Row>
      <Row gutter={40} style={{ marginBottom: '20px' }}>
        <Col span={10}>
          <LabelValue label="资源规格：" value={formatResource()}></LabelValue>
        </Col>
        <Col span={10}>
          <LabelValue label="挂载路径：" value={info?.mount_path}></LabelValue>
        </Col>
      </Row>
      <Row gutter={40} style={{ marginBottom: '20px' }}>
        <Col span={10}>
          <LabelValue label="API URL：" value={info?.url}></LabelValue>
        </Col>
        <Col span={10}>
          <LabelValue label="副本数量：" value={info?.replicas}></LabelValue>
        </Col>
      </Row>
      <Row gutter={40} style={{ marginBottom: '20px' }}>
        <Col span={10}>
          <LabelValue label="创建时间：" value={formatDate(info?.create_time)}></LabelValue>
        </Col>
        <Col span={10}>
          <LabelValue label="更新时间：" value={formatDate(info?.update_time)}></LabelValue>
        </Col>
      </Row>
      <Row gutter={40}>
        <Col span={10}>
          <LabelValue label="环境变量：" value={formatEnvText()}></LabelValue>
        </Col>
        <Col span={10}>
          <LabelValue label="描　　述：" value={info?.description}></LabelValue>
        </Col>
      </Row>
    </div>
  );
}

export default BasicInfo;
