import { MaterialIcons } from '@expo/vector-icons';
import React, { FC, useState } from 'react';

import SelectModal from '../Modal/SelectModal';
import TextFieldClickable from './TextFieldClickable';

type props = {
  value?: string;
  setValue: (text: string) => void;
  items: string[];
  title?: string;
  fullHeight?: boolean;
  onWarning?: () => void;
};

const TextFieldSelect: FC<props> = ({ title, value, items, setValue, fullHeight, onWarning }) => {
  const [isVisible, setIsVisible] = useState(false);
  return (
    <>
      <TextFieldClickable
        title={title}
        value={value}
        onPress={() => (onWarning !== undefined ? onWarning() : setIsVisible(true))}
        icon={<MaterialIcons name="keyboard-arrow-down" size={24} />}
      />
      <SelectModal
        items={items}
        title="Vyberte položku"
        itemGetter={item => item}
        isVisible={isVisible}
        setIsVisible={setIsVisible}
        selected={value}
        setSelected={setValue}
        fullHeight={fullHeight}
      />
    </>
  );
};

export default TextFieldSelect;
