import React, { useState } from 'react';
import { Space, Select, Field, Option } from '@xrnjs/ui';
import Card from '_global/Card';
import { IconXChina1 } from '../../../icons';
import { Text } from 'react-native';
import { styles } from './style';

const getOptionsData = ({
  optionLength,
  groupLength,
  hasDescription,
  hasContent,
  hasIcon,
  isLabelLong,
  isDescriptionLong,
  isContentLong,
  hasCustomHeight,
}: {
  optionLength: number;
  groupLength?: number;
  hasDescription?: boolean;
  hasContent?: boolean;
  hasIcon?: boolean;
  isLabelLong?: boolean;
  isDescriptionLong?: boolean;
  isContentLong?: boolean;
  hasCustomHeight?: boolean;
}): Option[] => {
  if (groupLength) {
    return Array.from({ length: groupLength }, (_, i) => ({
      label: `分组${i + 1}`,
      value: `group${i + 1}`,
      children: Array.from({ length: optionLength }, (_, j) => ({
        label: isLabelLong
          ? `选项${
              i * optionLength + j + 1
            }数量较多烦恼势均力敌办法是领导干部是恐惧的不过是恐惧的吧刚开始觉得不够呢时间多看两部分示例打击报复是空间`
          : `选项${i * optionLength + j + 1}`,
        value: `option${i * optionLength + j + 1}`,
        height: hasCustomHeight && (j + 1) % 10 === 0 ? 140 : 0,
        ...(hasIcon && {
          prefixIcon: <IconXChina1 size={24} style={{ marginRight: 8 }} />,
        }),
        ...(hasDescription && {
          subLabel: isDescriptionLong
            ? `数量较多烦恼势均力敌办是领导干部数量鸡蛋灌饼三六九等不够逻辑上的法呢时间多看两部分示例打击报复是空间的分布${
                j + 1
              }`
            : `选项${j + 1}`,
        }),
        ...(hasContent && {
          contentLabel: isContentLong ? `100,000,000,000,000` : `100,000`,
        }),
      })),
    }));
  }
  return Array.from({ length: optionLength }, (_, j) => ({
    label: isLabelLong
      ? `选项${
          j + 1
        }数量较多烦恼势均力敌办是领导高山峻岭的报告快结束了对吧法呢时间多看两部分示例打击报复是`
      : `选项${j + 1}`,
    value: `option${j + 1}`,
    height: hasCustomHeight && (j + 1) % 10 === 0 ? 300 : 0,
    ...(hasDescription && {
      subLabel: isDescriptionLong
        ? `数量较多烦恼势均力敌办法呢时间多看深刻的尼古拉斯看到那个里开始的那个两部分示例打击报复是空间的${
            j + 1
          }`
        : `选项${j + 1}`,
    }),
    ...(hasContent && {
      contentLabel: isContentLong ? `100,000,000,000,000` : `100,000`,
    }),
  }));
};

const SelectComponent = ({
  label,
  options,
}: {
  label: string;
  options: Option[];
}) => {
  const [visible, setVisible] = useState(false);
  const [value, setValue] = useState<string[]>([]);

  return (
    <Field label={label} requiredMark>
      <Select.SelectInput
        placeholder="请选择"
        onPress={() => setVisible(true)}
        value={value.map((item) => `选项${item}`).join(',')}
      />
      <Select
        title="请选择"
        type={Select.Type.checkbox}
        options={options}
        visible={visible}
        useFlatSelect
        onPressOverlay={() => setVisible(false)}
        onCancel={() => setVisible(false)}
        onClosed={() => setVisible(false)}
        onConfirm={(res: string | string[]) => {
          const resArray = Array.isArray(res) ? res : [res];
          setVisible(false);
          setValue(resArray);
        }}
      />
    </Field>
  );
};

const DataSelectExample = () => {
  return (
    <Card>
      <Space>
        <Text style={styles.title}>大数据 Select</Text>
        <SelectComponent
          label="普通多选"
          options={getOptionsData({
            optionLength: 10,
          })}
        />
        <SelectComponent
          label="普通多选 + 自定义高度"
          options={getOptionsData({
            optionLength: 10,
            hasCustomHeight: true,
          })}
        />
        <SelectComponent
          label="分组多选"
          options={getOptionsData({
            optionLength: 10,
            groupLength: 3,
          })}
        />
        <SelectComponent
          label="分组多选带描述"
          options={getOptionsData({
            optionLength: 10,
            groupLength: 3,
            hasDescription: true,
          })}
        />
        <SelectComponent
          label="分组多选带内容"
          options={getOptionsData({
            optionLength: 10,
            groupLength: 3,
            hasDescription: true,
            hasContent: true,
          })}
        />
        <SelectComponent
          label="分组多选带描述300"
          options={getOptionsData({
            optionLength: 10,
            groupLength: 30,
            hasDescription: true,
          })}
        />
        <SelectComponent
          label="分组多选带内容300"
          options={getOptionsData({
            optionLength: 10,
            groupLength: 30,
            hasDescription: true,
            hasContent: true,
            hasIcon: true,
          })}
        />
        <SelectComponent
          label="长label多选10"
          options={getOptionsData({
            optionLength: 10,
            groupLength: 1,
            isLabelLong: true,
          })}
        />
        <SelectComponent
          label="长描述多选10"
          options={getOptionsData({
            optionLength: 10,
            groupLength: 1,
            hasDescription: true,
            hasIcon: true,
            isDescriptionLong: true,
          })}
        />
        <SelectComponent
          label="长内容多选10"
          options={getOptionsData({
            optionLength: 10,
            groupLength: 1,
            hasDescription: true,
            hasContent: true,
            hasIcon: true,
            // isLabelLong: true,
            // isDescriptionLong: true,
            isContentLong: true,
          })}
        />
        <SelectComponent
          label="长label长描述多选10"
          options={getOptionsData({
            optionLength: 10,
            groupLength: 1,
            hasDescription: true,
            // hasContent: true,
            hasIcon: true,
            isLabelLong: true,
            isDescriptionLong: true,
            // isContentLong: true,
          })}
        />
      </Space>
    </Card>
  );
};

export default DataSelectExample;