import React, { useCallback, useState } from 'react';
import { Container, StyleSystemThemedProps, TouchableHighlight } from 'components/layout';
import { ChevronDown, ChevronUp } from 'icons';
import { ViewProps as ViewPropsBase } from 'react-native';
import { Card, CardVariant, Text, TouchableTile, TextVariant, Visible } from 'components';
import { ColorName } from '@emotion/react';
import { IconColorVariantsType } from 'icons/types';
import { capitalize } from 'utils/text';
import { TextField, TextFieldSizeVariants, TextFieldVariants } from '../text-field';

const marginTopVariants: Record<TextFieldSizeVariants, number> = {
  content: 15,
  'extra-small': 35,
  small: 40,
  medium: 45,
  large: 50,
  'extra-large': 55,
};
const dropBackgroundVariants: Record<DropDownVariant, ColorName> = {
  primary: 'base-01',
  outline: 'base-01',
  text: 'base-01',
};

const dropVariants: Record<DropDownVariant, CardVariant> = {
  primary: 'float',
  outline: 'float',
  text: 'plain',
};

const dropItemTextVariants: Record<DropDownVariant, ColorName> = {
  primary: 'grey-08',
  outline: 'grey-08',
  text: 'primary',
};
const dropDownIcon: Record<DropDownVariant, IconColorVariantsType> = {
  primary: 'white',
  outline: 'body',
  text: 'primary',
};

export const Dropdown: React.FC<DropDownType> = ({
  sizeVariant,
  titleVariant,
  onChangeValue,
  isCompact,
  dropDownListPositionVariant = 'float',
  titleColor,
  value,
  label,
  labelColorVariant,
  placeholder,
  caption,
  captionColorVariant,
  dropdownHeight = 150,
  items,
  variant,
  dropdownVariant,
  ...props
}) => {
  const [isOpen, setIsOpen] = useState(false);

  const switchDropDown = useCallback(() => {
    setIsOpen(!isOpen);
  }, [isOpen]);

  const handleSelect = useCallback(
    (selectedValue: string) => {
      onChangeValue(selectedValue);
      setIsOpen(false);
    },
    [onChangeValue]
  );

  let listItems: DropDownItemType[];
  const itemsType: any = typeof items[0];
  if (itemsType === 'string' || itemsType instanceof String) {
    listItems = items.map((item) => ({ label: item, value: item })) as DropDownItemType[];
  } else {
    listItems = items as DropDownItemType[];
  }
  const rightIcon = isOpen ? (
    <ChevronUp colorVariant={titleColor || dropDownIcon[dropdownVariant]} />
  ) : (
    <ChevronDown colorVariant={titleColor || dropDownIcon[dropdownVariant]} />
  );
  const isFloat = dropDownListPositionVariant === 'float';
  const listPosition = isFloat ? 'absolute' : 'relative';
  const marginTop = isFloat ? marginTopVariants[sizeVariant] : 5;
  return (
    <Container zIndex={100} {...props}>
      <Container position="relative">
        <>
          <TextField
            sizeVariant={sizeVariant}
            shapeVariant="round"
            colorVariant="base-02"
            placeholder={capitalize(value || placeholder)}
            variant={variant}
            caption={caption}
            captionColorVariant={captionColorVariant}
            label={label}
            labelColorVariant={labelColorVariant}
            rightElement={rightIcon}
          />
          <TouchableHighlight
            underlayColor={'transparent'}
            zIndex={200}
            position="absolute"
            height={50}
            width="100%"
            onPress={switchDropDown}
          >
            <Container height={50} width="100%" />
          </TouchableHighlight>
        </>
      </Container>
      <Visible if={isOpen}>
        <Card
          variant={dropVariants[dropdownVariant]}
          backgroundColor={dropBackgroundVariants[dropdownVariant]}
          position={listPosition}
          marginTop={marginTop}
          borderRadius={5}
          zIndex={10}
          left={0}
          right={0}
          height={dropdownHeight}
          overflow="scroll"
        >
          {listItems.map((item) => (
            <TouchableTile
              key={item.value}
              sizeVariant={sizeVariant}
              onPress={() => handleSelect(item.value)}
              leftElement={
                <Text variant="body" color={titleColor}>
                  {capitalize(item.label)}
                </Text>
              }
              variant="text"
              titleVariant={titleVariant}
              titleColor={titleColor || dropItemTextVariants[dropdownVariant]}
              shapeVariant="square"
            />
          ))}
        </Card>
      </Visible>
    </Container>
  );
};
export type DropDownVariant = 'primary' | 'outline' | 'text';
export type DropDownType = StyleSystemThemedProps & DropDownProps;

export type DropDownItemType = {
  label: string;
  value: string;
};

type DropDownListPositionVariant = 'relative' | 'float';
export interface DropDownProps extends ViewPropsBase {
  sizeVariant: TextFieldSizeVariants;
  dropdownVariant: DropDownVariant;
  variant: TextFieldVariants;
  value: string;
  placeholder: string;
  titleColor?: ColorName;
  dropDownListPositionVariant?: DropDownListPositionVariant;
  titleVariant?: TextVariant;
  isCompact?: boolean;
  items: DropDownItemType[] | string[];
  dropdownHeight?: number;
  caption?: string;
  label?: string;
  labelColorVariant?: ColorName;
  captionColorVariant?: ColorName;
  onChangeValue: (value: string) => void;
}