import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  TouchableOpacityProps,
} from 'react-native';
import { RadioButton } from './RadioButton';
import EditIcon from '../icons/edit.svg';
import { classNames } from '../utils';

export interface LargeSelectorProps extends TouchableOpacityProps {
  id: string;
  title: string;
  description?: string;
  subtitle?: string;
  additionalDescription?: string;
  editable?: boolean;
  isSelected: boolean;
  onSelect: (id: string | number) => void;
  onEdit: (id: string | number) => void;
  accessoryLeft?:
    | React.ReactElement
    | (() => React.ReactElement)
    | React.ReactNode;
  className?: string;
}

export const LargeSelector: React.FC<LargeSelectorProps> = ({
  id,
  title,
  description,
  subtitle,
  additionalDescription,
  editable,
  isSelected,
  onSelect,
  onEdit,
  accessoryLeft,
  className,
  ...restOfProps
}) => {
  const handleOnSelect = () => {
    onSelect(id);
  };

  const handleOnEdit = () => {
    onEdit(id);
  };

  return (
    <TouchableOpacity
      onPress={handleOnSelect}
      className={classNames(className)}
      {...restOfProps}
    >
      <View
        className={`p-4 rounded-2xl flex flex-row items-center justify-between mb-4 ${
          isSelected ? 'bg-brand-50' : 'bg-white'
        }`}
      >
        {accessoryLeft && (
          <View className="mr-2">
            {typeof accessoryLeft === 'function'
              ? accessoryLeft()
              : accessoryLeft}
          </View>
        )}
        <View className="flex-1 ml-4">
          <View className="flex flex-row items-center">
            <Text
              className={`font-poppins-medium text-medium-paragraph mr-4 ${
                isSelected ? 'text-brand-500' : 'text-black'
              }`}
            >
              {title}
            </Text>
            <Text className="font-poppins-medium text-small-paragraph text-neutral-700">
              {subtitle}
            </Text>
          </View>
          {description && (
            <Text className="my-2 font-poppins-light text-small-paragraph text-neutral-700">
              {description}
            </Text>
          )}
          {additionalDescription && (
            <Text className="font-poppins-light text-small-paragraph text-neutral-900">
              {additionalDescription}
            </Text>
          )}
        </View>
        <View className="flex flex-row items-center ml-4">
          <RadioButton isSelected={isSelected} onSelect={handleOnSelect} />
          {editable && (
            <TouchableOpacity className="ml-2" onPress={handleOnEdit}>
              <EditIcon width={16} height={16} />
            </TouchableOpacity>
          )}
        </View>
      </View>
    </TouchableOpacity>
  );
};