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

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

type DetailListItem =
  | {
      title?: string;
      value?: string;
      children?: React.ReactNode;
      classNames?: string;
      onPress?: () => void;
    }
  | undefined;

type props = {
  items?: DetailListItem[];
  title?: {
    text: string;
    icons?: {
      element: React.ReactNode;
      onPress: () => void;
    }[];
  };
  emptyElement?: React.ReactNode;
};

const DetailList: FC<props> = ({ items, title, emptyElement }) => {
  return (
    <>
      {!items?.every(item => item?.value === '') ? (
        <View className="mt-4">
          {title && <Title text={title.text} icons={title.icons} />}
          <View className={cn({ 'mt-4': title }, 'rounded bg-secondary-bg p-2')}>
            {items?.map((item, index) => (
              <View key={index}>
                {item && (
                  <>
                    {item?.title && (item?.value || item.children) && (
                      <View
                        className={cn('flex-row justify-between p-2', {
                          'rounded-sm bg-primary-bg': index % 2 === 1,
                        })}
                      >
                        <Text>{item?.title}</Text>
                        {item.value ? (
                          <>
                            {item?.onPress ? (
                              <TouchableOpacity onPress={item?.onPress}>
                                <Text
                                  className={cn(item?.classNames, 'flex-1 flex-wrap text-right')}
                                >
                                  {item?.value}
                                </Text>
                              </TouchableOpacity>
                            ) : (
                              <>
                                {item?.value.startsWith('+') ? (
                                  <PhoneDetail value={item?.value} />
                                ) : (
                                  <Text
                                    className={cn(item?.classNames, 'flex-1 flex-wrap text-right')}
                                  >
                                    {item?.value}
                                  </Text>
                                )}
                              </>
                            )}
                          </>
                        ) : (
                          item?.children
                        )}
                      </View>
                    )}
                  </>
                )}
              </View>
            ))}
          </View>
        </View>
      ) : (
        <>
          {emptyElement && (
            <View className="mt-4">
              {title && <Title text={title.text} icons={title.icons} />}
              {emptyElement}
            </View>
          )}
        </>
      )}
    </>
  );
};

export default DetailList;
