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

const options = [
  {
    label: '选项一',
    value: 'option1',
  },
  {
    label: '选项二',
    value: 'option2',
  },
  {
    label: '选项三',
    value: 'option3',
  },
];

const longOptions = new Array(20).fill(0).map((_, index) => ({
  label: `选项${index + 1}`,
  value: `option${index + 1}`,
}));

const LoadingSelect = ({
  type = Select.Type.radio,
  showSearch,
  isLong,
  isFlatList,
}: {
  type?: SelectProps['type'];
  showSearch?: boolean;
  isLong?: boolean;
  isFlatList?: boolean;
}) => {
  const [op, setOp] = useState<{ label: string; value: string }[]>([]);
  const [visible, setVisible] = useState(false);
  const [value, setValue] = useState<string | string[]>();
  const [displayValue, setDisplayValue] = useState<React.ReactNode>();

  const onChange = (selectedValue: string | string[]) => {
    setValue(selectedValue);
    if (typeof selectedValue === 'string') {
      const selectedOption = options.find((opt) => opt.value === selectedValue);
      setDisplayValue(selectedOption?.label);
      setVisible(false);
      return;
    }
  };

  const handleConfirm = (selectedValue: string | string[]) => {
    if (typeof selectedValue === 'string') return;
    const selectedOptions = selectedValue.map((val) =>
      isLong
        ? longOptions.find((opt) => opt.value === val)
        : options.find((opt) => opt.value === val)
    );
    setDisplayValue(selectedOptions.map((opt) => opt?.label).join(', '));
    setVisible(false);
  };

  const onClear = () => {
    setValue('');
    setDisplayValue('');
  };

  return (
    <>
      <Select
        type={type}
        options={op}
        title="请选择一个选项"
        loading={!op.length}
        value={value}
        showSearch={showSearch}
        onConfirm={handleConfirm}
        visible={visible}
        onPressOverlay={() => setVisible(false)}
        onCancel={() => setVisible(false)}
        onChange={onChange}
        useFlatSelect={isFlatList}
      />

      <Select.SelectInput
        value={displayValue}
        onPress={() => {
          setVisible(true);
          setOp([]);
          setTimeout(() => {
            setOp(isLong ? longOptions : options);
          }, 1000);
        }}
        placeholder={`请选择${isLong ? ' 长 ' : ''}${
          showSearch ? ' 带搜索 ' : ''
        }${type === Select.Type.checkbox ? ' 多选 ' : ''}${
          isFlatList ? ' 虚拟 ' : ''
        }选项`}
        onClear={onClear}
      />
    </>
  );
};

const LoadingStateExample = () => {
  return (
    <Card>
      <Space>
        <Text style={styles.title}>loading</Text>
        <LoadingSelect />
        <LoadingSelect type={Select.Type.checkbox} />
        <LoadingSelect type={Select.Type.checkbox} isLong />
        <LoadingSelect type={Select.Type.checkbox} isLong isFlatList />
        <LoadingSelect showSearch />
        <LoadingSelect type={Select.Type.checkbox} showSearch />
        <LoadingSelect type={Select.Type.checkbox} showSearch isLong />
        <LoadingSelect
          type={Select.Type.checkbox}
          showSearch
          isLong
          isFlatList
        />
      </Space>
    </Card>
  );
};

export default LoadingStateExample;