import React, {Fragment} from 'react';
import {StyleSheet, View} from 'react-native';
import {
  Colors,
  fontSz,
  getInterestRange,
  globalStyles,
  Images,
  ms,
  SavingsCategoryType,
  savingTypeColors,
  savingTypeDeepColors,
} from '../../utils';
import {CustomPressable} from '../Button';
import {SmartImage} from '../Images/SmartImage';
import {Text} from '../Text';
import {saveAsYouCollectBenefits} from '../../app/savings';

type Props = {
  option: SavingsCategoryType;
  onPress: (option: SavingsCategoryType) => void;
  selected: SavingsCategoryType | null;
  position: number;
  range?: string;
};

export const getCategoryIcon = (name: string) => {
  switch (name) {
    case 'flexible':
      return Images.flexibleSavings;
    case 'locked':
      return Images.lockedSavings;
    case 'save as you collect':
      return Images.saveAsYouCollect;
    default:
      return Images.flexibleSavings;
  }
};

const SavingsCategory = (props: Props) => {
  const {option, selected, onPress, position, range} = props;
  const {
    name,
    id,
    interestRate,
    isLocked,
    lockedPenaltyFeePercentage,
    minimumLockDuration,
    withdrawalLimit,
    interestRange: backendInterestRange,
  } = option;
  const benefits = [
    // id === 3 && 'Save a part of every inflow into your wallet',
    // isLocked
    //   ? `Locked for a minimum of ${minimumLockDuration} months`
    //   : 'No lock-in period',
    // isLocked
    //   ? `Penalty fee of ${lockedPenaltyFeePercentage}% on early withdrawal`
    //   : 'No penalty fee on early withdrawal',
    // withdrawalLimit
    //   ? `Withdrawal limit of ${withdrawalLimit} per month`
    //   : 'No withdrawal limit',
    'Switch on auto-save to stay accountable',
    'Halaal Compliant',
  ];
  const flexibleBenefits = ['No interest for more than 3 withdrawal'];
  const lockedBenefits = [
    `Locked for a longer duration(at least ${minimumLockDuration} month${minimumLockDuration > 1 ? 's' : ''})`,
    'Cannot withdraw till maturity',
  ];

  const getBenefits = (id: number) => {
    switch (id) {
      case 1:
        return [...flexibleBenefits, ...benefits];
      case 2:
        return [...lockedBenefits, ...benefits];

      default:
        return [...benefits];
    }
  };

  const interestRange =
    range ??
    `${getInterestRange(option).min} - ${getInterestRange(option).max}`;

  const icon = getCategoryIcon(name);
  return (
    <Fragment key={position}>
      <CustomPressable
        onPress={() => onPress(option)}
        style={{
          paddingVertical: ms(15),
          paddingHorizontal: ms(15),
          backgroundColor: savingTypeColors[position],
          borderRadius: ms(4),
          borderColor:
            selected?.id === id
              ? savingTypeDeepColors[position]
              : savingTypeColors[position],
          borderWidth: ms(2),
        }}>
        <View style={[globalStyles.rowBetween]}>
          <View style={[globalStyles.rowStart, {flex: 1, columnGap: ms(5)}]}>
            <SmartImage
              source={icon}
              style={{
                width: ms(27),
                height: ms(27),
                tintColor: Colors.chooseAccountTypeText,
              }}
            />
            <View style={{paddingTop: ms(id === 2 ? 10 / 2 : 0)}}>
              <Text
                fontSize={fontSz(16)}
                lineHeight={fontSz(20)}
                fontFamily="Gordita-Medium"
                fontWeight="500"
                textAlign={'left'}
                text={`${name} ${id === 3 ? '' : 'savings'}`}
                color={Colors.headerText}
                style={{textTransform: 'capitalize'}}
              />
              {id === 2 && (
                <Text
                  fontSize={fontSz(10)}
                  lineHeight={fontSz(16)}
                  fontFamily="Gordita-Regular"
                  fontWeight="500"
                  textAlign={'left'}
                  text={'(Higher Returns)'}
                  color={Colors.headerText}
                  style={{textTransform: 'capitalize'}}
                />
              )}
            </View>
          </View>
          <View
            style={[
              {
                alignSelf: 'flex-start',
                paddingHorizontal: ms(7.5),
                paddingVertical: ms(5),
                backgroundColor: savingTypeDeepColors[position],
                borderRadius: ms(8),
              },
            ]}>
            <Text
              fontSize={fontSz(10)}
              fontFamily="Gordita-Medium"
              fontWeight="500"
              textAlign={'left'}
              text={
                isLocked && backendInterestRange
                  ? `${backendInterestRange}% per annum`
                  : `${interestRate}% per annum`
              }
              color={Colors.white}
            />
          </View>
        </View>
        <View style={{rowGap: ms(10), paddingTop: ms(20)}}>
          {id !== 3 &&
            getBenefits(id)?.map((benefit: any, index: any) => {
              return (
                <Fragment key={index}>
                  <View
                    style={[
                      globalStyles.rowStart,
                      {
                        alignItems: 'flex-start',
                        columnGap: ms(15),
                      },
                    ]}>
                    <SmartImage
                      source={Images.check}
                      style={{
                        width: ms(15),
                        height: ms(15),
                        tintColor: Colors.black,
                      }}
                    />

                    <Text
                      fontSize={fontSz(13)}
                      fontFamily="Gordita-Medium"
                      fontWeight="500"
                      textAlign={'left'}
                      text={`${benefit}`}
                      color={Colors.chooseAccountTypeText}
                      style={{maxWidth: '90%'}}
                    />
                  </View>
                </Fragment>
              );
            })}
          {id === 3 &&
            saveAsYouCollectBenefits.map((benefit: any, index: any) => {
              return (
                <Fragment key={index}>
                  <View
                    style={[
                      globalStyles.rowStart,
                      {
                        alignItems: 'flex-start',
                        columnGap: ms(10),
                      },
                    ]}>
                    <SmartImage
                      source={Images.check}
                      style={{
                        width: ms(15),
                        height: ms(15),
                        tintColor: Colors.black,
                      }}
                    />

                    <Text
                      fontSize={fontSz(13)}
                      fontFamily="Gordita-Medium"
                      fontWeight="500"
                      textAlign={'left'}
                      text={`${benefit}`}
                      color={Colors.chooseAccountTypeText}
                    />
                  </View>
                </Fragment>
              );
            })}
        </View>
      </CustomPressable>
    </Fragment>
  );
};

export default SavingsCategory;

const styles = StyleSheet.create({});