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

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

const BasicRadioExample = () => {
  const [visible, setVisible] = useState(false);
  const [showNoMoreTip, setShowNoMoreTip] = useState(true);
  const [value, setValue] = useState<string>();
  const [displayValue, setDisplayValue] = useState<React.ReactNode>();

  const onChange = (selectedValue: string | string[]) => {
    const val = selectedValue as string;
    setValue(val);
    const selectedOption = options.find((opt) => opt.value === val);
    setDisplayValue(
      <View style={styles.displayContainer}>
        <IconXChina1 size={20} />
        <Text style={styles.displayText}>{selectedOption?.label}</Text>
      </View>
    );
    setVisible(false);
  };

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

  return (
    <Card>
      <Space>
        <Text style={styles.title}>基础单选</Text>
        <Switch value={showNoMoreTip} onChange={setShowNoMoreTip} />
        <Text>是否显示没有更多选项</Text>
        <Select
          type={Select.Type.radio}
          options={options}
          title="请选择一个选项"
          showNoMoreTip={showNoMoreTip}
          value={value}
          visible={visible}
          onPressOverlay={() => setVisible(false)}
          onCancel={() => setVisible(false)}
          onChange={onChange}
          useFlatSelect
        />

        <Select.SelectInput
          value={displayValue}
          onPress={() => setVisible(true)}
          placeholder="请选择选项"
          onClear={onClear}
        />
        <Input placeholder="请输入" />
      </Space>
    </Card>
  );
};

export default BasicRadioExample;