import { Input } from '@tarojs/components';

import { ArrowRight } from '@taroify/icons';
import { useCallback, useState } from 'react';

import { ISelectProps, PopupSelect } from '@/components/select';

import './index.less';

interface IProps extends ISelectProps {}

const PREFIX = 'bl-form-select';

function BlFormSelect(props: IProps) {
  const { value, options, onSelect, ...otherProps } = props;
  const [showSelect, setShowSelect] = useState(false);

  const handleSelect = useCallback(
    newValue => {
      setShowSelect(false);
      onSelect(newValue);
    },
    [onSelect]
  );

  return (
    <>
      <div className={PREFIX} onClick={() => setShowSelect(true)}>
        <Input
          disabled
          placeholder="请选择"
          className={`${PREFIX}__input`}
          placeholderClass={`${PREFIX}__input-placeholder`}
          value={options.find(i => i.value === value)?.label || ''}
        />
        <ArrowRight className={`${PREFIX}__right-icon`} />
      </div>
      <PopupSelect
        value={value}
        options={options}
        open={showSelect}
        onSelect={handleSelect}
        onClose={() => setShowSelect(false)}
        {...otherProps}
      />
    </>
  );
}

export default BlFormSelect;
