import React, { useState } from 'react';
import styles from './style/index.module.less';
import { Button, Input, Modal, Radio, Space } from '@arco-design/web-react';
import { IconSearch } from '@arco-design/web-react/icon';
import CollapseList from './collapseList';
import { startStatusConstant } from '@/const/isdp/componentDeploy';
import ConfigTutorial from '@/pages/componentDevelopment/componentEnv/configTutorial';

const ComponentDeployment = () => {
  const [searchKeyword, setSearchKeyword] = useState('');
  const [selectedStatus, setSelectedStatus] = useState<string | undefined>(undefined);
  const [tutorialVisible, setTutorialVisible] = useState(false);

  // 状态选项配置
  const statusOptions = [
    { label: '全部', value: undefined },
    { label: '启用中', value: 'RUN' },
    { label: '已下架', value: 'STOP' }
  ];

  return (
    <>
      <div className={styles['component-deployment']}>
        <div className={styles['header']}>
          <Radio.Group
            value={selectedStatus}
            onChange={(value) => setSelectedStatus(value)}
            name="button-radio-group"
          >
            {statusOptions.map((item) => {
              return (
                <Radio key={item.label} value={item.value}>
                  {({ checked }) => {
                    return (
                      <Button tabIndex={-1} key={item.label} shape="round" type={checked ? 'primary' : 'default'}>
                        {item.label}
                      </Button>
                    );
                  }}
                </Radio>
              );
            })}
          </Radio.Group>

          <Space>
            <Input
              prefix={<IconSearch />}
              placeholder={'搜索'}
              style={{ width: 236 }}
              value={searchKeyword}
              onChange={(value) => setSearchKeyword(value)}
              onPressEnter={() => {
                // 触发搜索
              }}
            />
            <Button
              type="primary"
              style={{ marginLeft: 5, borderRadius: 4 }}
              onClick={() => setTutorialVisible(true)}
            >
              实例指引
            </Button>
          </Space>
        </div>
        <div className={styles['content']}>
          <CollapseList searchKeyword={searchKeyword} runStatus={selectedStatus} />
        </div>
      </div>

      <Modal
        title="组件实例教程"
        visible={tutorialVisible}
        onCancel={() => setTutorialVisible(false)}
        footer={null}
        style={{ top: 20, width: '100%' }}
      >
        <ConfigTutorial tutorialType="compInstance" />
      </Modal>
    </>
  );
};

export default ComponentDeployment;