import cn from 'classnames';
import React, { FC } from 'react';
import { TouchableOpacity, View, Text, FlatList, RefreshControlProps } from 'react-native';

import Title from './components/Title';

type propsItem = {
  item?: ClickableListItemProps;
  index: number;
};

export const ClickableListItem: FC<propsItem> = ({ item, index }) => {
  return (
    <>
      {item ? (
        <TouchableOpacity
          className={cn({ 'pb-4': index === 0 }, { 'py-4': index !== 0 })}
          onPress={() => item.onPress()}
          disabled={item.disabled}
        >
          <View className="flex-row items-center space-x-3">
            {item.icon}
            <View className={cn('w-[90%]')}>
              <View className="flex-row items-center space-x-4">
                <Text className="font-panton text-md font-bold text-secondary">{item.title}</Text>
                {item.titleIcon && <Text className="text-secondary">{item.titleIcon}</Text>}
              </View>
              <View className="w-[98%] flex-row flex-wrap justify-between">
                {item.subtitle && <Text className="text-sm">{item.subtitle}</Text>}
                {item.info && <Text className="text-sm">{item.info}</Text>}
              </View>
            </View>
          </View>
        </TouchableOpacity>
      ) : (
        <View className="pt-4"></View>
      )}
    </>
  );
};

export type ClickableListItemProps =
  | {
      title: string;
      titleIcon?: React.ReactNode;
      subtitle?: string;
      info?: string;
      icon?: React.ReactNode;
      onPress: () => void;
      disabled?: boolean;
    }
  | undefined;

type commonProps = {
  items?: ClickableListItemProps[];
  emptyElement?: React.ReactNode;
};

type defaultProps = {
  title?: {
    text: string;
    icon?: {
      element: React.ReactNode;
      onPress: () => void;
    };
  };
  refreshControl?: never;
};

type flatProps = {
  title?: never;
  refreshControl?:
    | React.ReactElement<RefreshControlProps, string | React.JSXElementConstructor<any>>
    | undefined;
};

type props = commonProps & (defaultProps | flatProps);

const ClickableList: FC<props> = ({ items, title, emptyElement }) => {
  return (
    <View>
      {title && <Title text={title.text} icons={title.icon ? [title.icon] : undefined} />}
      {items?.length === 0 && emptyElement ? (
        emptyElement
      ) : (
        <View
          className={cn(
            { 'mt-4': title },
            'grid-cols divide-y divide-divider rounded bg-secondary-bg p-4',
          )}
        >
          {items?.map((item, index) => (
            <View key={index}>
              <ClickableListItem item={item} index={index} />
            </View>
          ))}
          <View className="pt-4"></View>
        </View>
      )}
    </View>
  );
};

export const ClickableFlatList: FC<props> = ({ items, title, emptyElement, refreshControl }) => {
  return (
    <View className="mt-4 flex-1">
      {title && <Title text={title.text} icons={title.icon ? [title.icon] : undefined} />}
      {items?.length === 0 && emptyElement ? (
        emptyElement
      ) : (
        <View className={cn({ 'mt-4': title }, 'rounded bg-secondary-bg p-4')}>
          <FlatList
            ItemSeparatorComponent={() => <View className="h-1 bg-divider" />}
            refreshControl={refreshControl}
            data={[...(items ? items : []), undefined]}
            renderItem={({ item, index }) => (
              <View>
                <ClickableListItem item={item} index={index} />
              </View>
            )}
          />
        </View>
      )}
    </View>
  );
};

export default ClickableList;
