import React, { useContext, useState } from 'react';
import { InputProps } from '../Input/interface';
import { useLocale } from '../Locale/locale';
import {
  PickerMethodProps,
  PickerOption,
  PickerValue,
  Instance,
} from './PickerInstance';
import { Pressable, View, ViewStyle } from 'react-native';
import Input from '../Input';
import { IconXLowersmall1 } from '../../icons';
import createStyles from './styles/input.style';
import { PortalContext } from '../../core/portal/portal-host';

export type PickerInputProps = PickerMethodProps & {
  inputProps?: InputProps;
  disabled?: boolean;
  placeholder?: string;
  value?: PickerValue[];
  style?: ViewStyle;
};

function PickerInput(props: PickerInputProps) {
  const langValues = useLocale().Selector;
  const styles = createStyles();
  const { tag } = useContext(PortalContext);

  const [pickerValue, setPickerValue] = useState<PickerOption>();

  const {
    placeholder = langValues.title,
    inputProps,
    disabled,
    columns,
    value,
    defaultValue,
    style,
    ...resetProps
  } = props;

  const currentOption = pickerValue
    ? pickerValue
    : (columns as PickerOption[])?.find(
        (option) => option.value === value?.[0]
      );

  const onPress = () => {
    Instance({
      defaultValue: value ?? (defaultValue || []),
      title: langValues.title,
      columns,
      portalTag: tag,
      ...resetProps,
    }).then((data) => {
      if (data.action === 'confirm') {
        setPickerValue(data.columns[0]);
      }
    });
  };

  return (
    <View style={[styles.wrapper, style]}>
      <Input
        value={(currentOption?.label as string) || undefined}
        placeholder={placeholder}
        autoPressFocus={false}
        disabledPress
        readOnly
        status={!inputProps?.status ? 'error' : inputProps?.status}
        suffix={<IconXLowersmall1 size={16} />}
        {...inputProps}
      />
      <Pressable disabled={disabled} onPress={onPress} style={styles.cover} />
    </View>
  );
}

export default PickerInput;