import { MaterialIcons, FontAwesome, FontAwesome5 } from '@expo/vector-icons';
import cn from 'classnames';
import React, { FC, useState } from 'react';
import { TouchableOpacity, Text, View, Image } from 'react-native';

import Title from '../List/components/Title';

type props = {
  classNames?: string;
  title: string;
  defaultOpen?: boolean;
  children?: React.ReactNode;
};

const Dropdown: FC<props> = ({ children, classNames, title, defaultOpen = false }) => {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <View
      className={cn(
        'mt-4 rounded bg-secondary-bg',
        { 'border border-secondary': open },
        classNames,
      )}
    >
      <TouchableOpacity
        className={cn('flex-row justify-between px-4 pt-4', { 'pb-4': !open })}
        onPress={() => {
          setOpen(prev => !prev);
        }}
      >
        <Title text={title} />
        <Text className={`${open ? 'text-secondary' : 'text-primary'}`}>
          <MaterialIcons name={`keyboard-arrow-${open ? 'up' : 'down'}`} size={24} />
        </Text>
      </TouchableOpacity>
      {open && children && <View>{children}</View>}
    </View>
  );
};

export default Dropdown;

type CardRow = {
  title: string;
  value: string;
  dropdown?: boolean;
};

type propsCard = {
  classNames?: string;
  title: string;
  items: CardRow[];
  logo?: string;
  children?: React.ReactNode;
  expandedId: string;
  setExpandedId: (value: string) => void;
  currentId: string;
};

export const DropdownCard: FC<propsCard> = ({
  items,
  title,
  classNames,
  children,
  logo,
  expandedId,
  setExpandedId,
  currentId,
}) => {
  const open = expandedId === currentId;
  return (
    <View
      className={cn(
        'mt-4 rounded bg-secondary-bg py-2 pr-2',
        { 'border border-secondary': open, 'pl-2': !logo?.length },
        classNames,
      )}
    >
      <TouchableOpacity
        onPress={() => {
          if (open) {
            setExpandedId('');
          } else {
            setExpandedId(currentId);
          }
        }}
      >
        <View className={cn('px-2', { 'pb-2': !open, 'pt-2': !logo?.length })}>
          <View className="w-full">
            <View className={cn('flex-row items-center justify-between px-2 ')}>
              <View className="flex flex-row items-center">
                {logo?.length && (
                  <View className="mr-2 flex pt-2">
                    {logo === 'empty' && (
                      <FontAwesome name="file-photo-o" size={50} color="black" />
                    )}
                    {logo === 'user' && <FontAwesome5 name="user" size={50} color="black" />}
                    {logo && logo !== 'empty' && logo !== 'user' && (
                      <Image
                        className="h-[60px] w-[60px] rounded"
                        source={{ uri: `data:image/png;base64,${logo}` }}
                      />
                    )}
                  </View>
                )}
                <Title classNames={cn({ 'w-[75%]': logo?.length })} text={title} />
              </View>
              <Text className={`${open ? 'text-secondary' : 'text-primary'}`}>
                <MaterialIcons name={`keyboard-arrow-${open ? 'up' : 'down'}`} size={24} />
              </Text>
            </View>
            {items
              ?.filter(item => (open ? true : !item.dropdown))
              .map((row, index) => (
                <View key={index}>
                  {row && (
                    <>
                      <View
                        className={cn('flex-row justify-between p-2', {
                          'rounded-sm bg-primary-bg': index % 2 === 1,
                        })}
                      >
                        <Text>{row?.title}</Text>
                        <Text className="flex-1 flex-wrap text-right">{row?.value}</Text>
                      </View>
                    </>
                  )}
                </View>
              ))}
          </View>
        </View>
      </TouchableOpacity>
      {open && children && <View className={cn({ 'pl-2': logo?.length })}>{children}</View>}
    </View>
  );
};
