import React, {useMemo, useState} from 'react';
import {Keyboard, ListRenderItem, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Title} from '@components/_HuGo/Title';
import {Pressable} from '@components/_core/Pressable';
import {Typography} from '@components/_core/Typography';
import {Dialog} from '@components/_HuGo/Dialog';
import {List} from '@components/_HuGo/List';
import {INPUT_ICONS} from '@components/_HuGo/Inputs/constants';
import {
  InputBox,
  InputCore,
  InputSelectOption,
  InputSelectProps,
} from '@components/_HuGo/Inputs';
import {useTheme} from '@shared/theme';
import {commonStyles} from '@shared/styles';
import {CURRENCIES, CurrencyCode} from '@shared/currencies';

import {styles} from './styles';

const DEFAULT_SNAP_POINTS = ['40%', '90%'];

const keyExtractor = (item: InputSelectOption<CurrencyCode>) => `${item.id}`;

export interface InputCurrencySelectProps
  extends Omit<
    InputSelectProps<CurrencyCode>,
    'options' | 'value' | 'onChange'
  > {
  value?: CurrencyCode | null;
  onChange?: (value: CurrencyCode | null) => void;
}

export function InputCurrencySelect({
  label,
  helper,
  isError,
  isSuccess,
  disabled,
  onClose,
  onChange,
  value,
  style,
  size,
}: InputCurrencySelectProps) {
  const {t} = useTranslation();
  const {theme, iconSizes} = useTheme();
  const [focused, setFocused] = useState(false);
  const color = disabled
    ? theme.text.neutral.disabled
    : theme.text.neutral.default;
  const options = useMemo(
    () =>
      Object.values(CURRENCIES).map(currency => ({
        id: currency.code,
        label: t(`general.currencies.${currency.code}`),
      })),
    [t],
  );
  const itemSelected = useMemo(
    () => options.find(option => value === option.id),
    [options, value],
  );

  const onInputPress = () => {
    Keyboard.dismiss();
    setFocused(true);
  };

  const onModalClose = () => {
    setFocused(false);
    onClose?.();
  };

  const onItemPress = (id: CurrencyCode) => () => {
    onModalClose();
    onChange?.(id);
  };

  const renderItem: ListRenderItem<InputSelectOption<CurrencyCode>> = ({
    item,
  }) => (
    <Pressable
      backgroundColor="transparent"
      onPress={onItemPress(item.id)}
      style={styles.item}>
      <View style={styles.itemContainer}>
        <Title
          title={item.label}
          description={item.description}
          descriptionNumberOfLines={2}
          size="s"
          style={commonStyles.flex}
        />
        <Typography color={color}>{item.id}</Typography>
      </View>
    </Pressable>
  );

  return (
    <>
      <InputCore
        label={label}
        helper={helper}
        isSuccess={isSuccess}
        isError={isError}
        focused={focused}
        disabled={disabled}
        style={style}>
        <InputBox
          showStateIcon={false}
          isSuccess={isSuccess}
          isError={isError}
          disabled={disabled}
          focused={focused}
          onPress={onInputPress}
          size={size}
          RightComponent={
            <INPUT_ICONS.down size={iconSizes.x6} color={color} />
          }>
          <View style={styles.valueContainer}>
            {itemSelected ? (
              <Typography color={color} numberOfLines={1}>
                {itemSelected.id}
              </Typography>
            ) : (
              <Typography color={color}>-</Typography>
            )}
          </View>
        </InputBox>
      </InputCore>
      <Dialog
        title={t('marketplace.currency')}
        isVisible={focused}
        onClose={onModalClose}
        withCloseButton={false}
        snapPoints={DEFAULT_SNAP_POINTS}
        scrollable
        children={
          <List
            data={options}
            showsVerticalScrollIndicator={false}
            renderItem={renderItem}
            keyExtractor={keyExtractor}
            style={styles.list}
          />
        }
      />
    </>
  );
}
