import React, { useEffect, useState } from 'react';
import styles from './style/index.module.less';
import { Button, Input, Select, Space, Cascader } from '@arco-design/web-react';
import { IconSearch } from '@arco-design/web-react/icon';

const Option = Select.Option;

const ComponentCoding = () => {
  const [serverUrl, setServerUrl] = useState('https://arco.design/vue/component/button');


  useEffect(() => {
    const uri = process.env.NEXT_PUBLIC_DEV_SERVER_HOST;
    // const uri = 'http://api.myserver.com:4121';
    const codeServerPrefix = '/code-server';
    const codeServerFolderPre = '/app/data';
    const tempData = '/000000/admin_testcode1/master';
    setServerUrl(`${uri}${codeServerPrefix}?folder=${codeServerFolderPre}${tempData}`);

  });

  const componentScreening = () => {
    // 将数据结构修改为级联结构
    const cascaderOptions = [
      {
        label: '设备数采与控制交互组件',
        value: '2',
        children: [
          {
            label: 'Java:8',
            value: '2-1',
            children: [
              {
                label: '数据采集模块',
                value: '2-1-1'
              },
              {
                label: '设备控制接口',
                value: '2-1-2'
              }
            ]
          },
          {
            label: 'Python:3.10.12',
            value: '2-2',
            children: [
              {
                label: '数据采集模块',
                value: '2-2-1'
              },
              {
                label: '设备控制接口',
                value: '2-2-2'
              }
            ]
          }
        ]
      },
      {
        label: '视觉AI组件',
        value: '3',
        children: [
          {
            label: 'Java:8',
            value: '3-1',
            children: [
              {
                label: '图像识别',
                value: '3-1-1'
              },
              {
                label: '目标检测',
                value: '3-1-2'
              }
            ]
          },
          {
            label: 'Python:3.10.12',
            value: '3-2',
            children: [
              {
                label: '图像识别',
                value: '3-2-1'
              },
              {
                label: '目标检测',
                value: '3-2-2'
              }
            ]
          }
        ]
      },
      {
        label: '运动规划组件',
        value: '4',
        children: [
          {
            label: 'Java:8',
            value: '4-1',
            children: [
              {
                label: '路径规划',
                value: '4-1-1'
              }
            ]
          },
          {
            label: 'Python:3.10.12',
            value: '4-2',
            children: [
              {
                label: '路径规划',
                value: '4-2-1'
              }
            ]
          }
        ]
      },
      {
        label: '工艺知识服务组件',
        value: '5',
        children: [
          {
            label: 'Java:8',
            value: '5-1',
            children: [
              {
                label: '工艺参数优化',
                value: '5-1-1'
              }
            ]
          },
          {
            label: 'Python:3.10.12',
            value: '5-2',
            children: [
              {
                label: '工艺参数优化',
                value: '5-2-1'
              }
            ]
          }
        ]
      },
      {
        label: '时序数据AI组件',
        value: '6',
        children: [
          {
            label: 'Java:8',
            value: '6-1',
            children: [
              {
                label: '时间序列预测',
                value: '6-1-1'
              }
            ]
          },
          {
            label: 'Python:3.10.12',
            value: '6-2',
            children: [
              {
                label: '时间序列预测',
                value: '6-2-1'
              }
            ]
          }
        ]
      }
    ];

    return (
      // 使用 Cascader 组件替换 Select 组件
      <Cascader
        placeholder="选择组件"
        autoWidth={true}
        showSearch
        options={cascaderOptions}
      />
    );
  };


  return (
    <div className={styles['component-coding']}>
      <div className={styles['header']}>
        <Space
          size={50}
          style={{ marginTop: '20px', marginBottom: '30px' }}
        >
          <div className={styles['handleRow']}>
            <span>组件筛选：</span>
            {componentScreening()}
          </div>
        </Space>

        <Space>
          <Button
            type="primary"
            style={{ marginLeft: 5, borderRadius: 4 }}
          >
            启动项设置
          </Button>
          <Input
            prefix={<IconSearch />}
            placeholder={'搜索组件关键词'}
            style={{ width: 236 }}
          />
        </Space>

      </div>

      <div className={styles['code-iframe']}>
        <iframe width="100%" height="100%" frameBorder={0} src={serverUrl} />
      </div>
    </div>
  );
};

export default ComponentCoding;