import { ExclamationCircleFilled } from '@ant-design/icons';
import { AlertBlockInfo } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Typography } from 'antd';
import RegisterClusterInner from '../register-cluster-inner';
import { useAddWorkerContext } from './add-worker-context';
import { AddWorkerStepProps, StepNamesMap } from './config';
import { Title } from './constainers';
import StepCollapse from './step-collapse';

const K8sRunCommand: React.FC<AddWorkerStepProps> = ({ disabled }) => {
  const { registrationInfo, stepList, summary } = useAddWorkerContext();
  const intl = useIntl();

  const stepIndex = stepList.indexOf(StepNamesMap.RunCommand) + 1;
  const currentGPU = summary.get('currentGPU') || '';
  const currentGPUs: string[] = summary.get('selectedGPUs') || [];

  return (
    <StepCollapse
      disabled={disabled}
      name={StepNamesMap.RunCommand}
      title={
        <Title>
          {stepIndex}.{' '}
          {intl.formatMessage({ id: 'clusters.addworker.runCommand' })}
        </Title>
      }
    >
      <Typography.Paragraph
        style={{
          marginBottom: 8
        }}
      >
        {intl.formatMessage({
          id: 'clusters.create.addCommand.k8s.tips'
        })}
      </Typography.Paragraph>
      <AlertBlockInfo
        type="warning"
        style={{ marginBottom: 8 }}
        icon={<ExclamationCircleFilled />}
        message={intl.formatMessage({
          id: 'clusters.create.addCommand.k8s.version.warning'
        })}
      ></AlertBlockInfo>
      <RegisterClusterInner
        registrationInfo={registrationInfo}
        currentGPU={currentGPU}
        currentGPUs={currentGPUs}
      />
    </StepCollapse>
  );
};

export default K8sRunCommand;