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

import { NavigationProp, useNavigation } from '@react-navigation/native';

import { styles } from './styles';

import { Header, PageWrapper } from '../../../../components';
import { NAVIGATION_PAGES } from '../../../../types';
import { Colors } from '../../../../theme';

import UserPenIcon from '../../../../../assets/icons/user-pen.svg';
import UserPlusIcon from '../../../../../assets/icons/user-plus.svg';
import BellIcon from '../../../../../assets/icons/bell.svg';
import MailIcon from '../../../../../assets/icons/mail.svg';
import FAQIcon from '../../../../../assets/icons/faq.svg';
import DocumentIcon from '../../../../../assets/icons/document.svg';
import ShieldIcon from '../../../../../assets/icons/shield.svg';
import ExitIcon from '../../../../../assets/icons/exit.svg';
import UserXMark from '../../../../../assets/icons/user-xmark.svg';

import ArrowRightIcon from '../../../../../assets/icons/right-arrow.svg';

type ButtonType = {
  label: string;
  icon: ReactNode;
  red?: boolean;
  buttonFn?: (navigationHook: NavigationProp<ReactNavigation.RootParamList>) => void;
};

const buttons: ButtonType[] = [
  {
    label: 'Edit Profile',
    icon: <UserPenIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
    buttonFn: (navigation) => {
      navigation.navigate(NAVIGATION_PAGES.EDIT_PERSONAL_INFO);
    }
  },
  {
    label: 'Invite a Friend',
    icon: <UserPlusIcon fill={Colors.DARK_BLUE} width={20} height={20} />
  },
  {
    label: 'Notification',
    icon: <BellIcon fill={Colors.DARK_BLUE} width={20} height={20} />
  },
  {
    label: 'Contact Us',
    icon: <MailIcon fill={Colors.DARK_BLUE} width={20} height={20} />
  },
  {
    label: 'FAQs',
    icon: <FAQIcon fill={Colors.DARK_BLUE} width={20} height={20} />
  },
  {
    label: 'Terms & Conditions',
    icon: <DocumentIcon fill={Colors.DARK_BLUE} width={20} height={20} />
  },
  {
    label: 'Privacy Notice',
    icon: <ShieldIcon fill={Colors.DARK_BLUE} width={20} height={20} />
  },
  {
    label: 'Logout',
    icon: <ExitIcon fill={Colors.RED} width={20} height={20} />,
    red: true
  },
  {
    label: 'Delete account',
    icon: <UserXMark fill={Colors.RED} width={20} height={20} />,
    red: true
  }
];

const Settings = () => {
  return (
    <PageWrapper>
      <Header label={'Settings'} />
      {buttons.map((button) => (
        <SettingsButton
          label={button.label}
          icon={button.icon}
          red={button.red}
          buttonFn={button.buttonFn}
        />
      ))}
    </PageWrapper>
  );
};

type ButtonProps = {
  label: string;
  icon: ReactNode;
  buttonFn?: (navigate: NavigationProp<ReactNavigation.RootParamList>) => void;
  red?: boolean;
};

const SettingsButton: FC<ButtonProps> = ({ label, icon, buttonFn, red }) => {
  const navigation = useNavigation();

  return (
    <TouchableOpacity
      style={[styles.alignStyle, styles.buttonWrapper, { justifyContent: 'space-between' }]}
      onPress={() => (buttonFn ? buttonFn(navigation) : null)}
    >
      <View style={styles.alignStyle}>
        {icon}
        <Text style={[styles.buttonLabel, red ? { color: Colors.RED } : null]}>{label}</Text>
      </View>
      <View>
        <ArrowRightIcon fill={red ? Colors.RED : Colors.LIGHT_GRAY} width={20} height={20} />
      </View>
    </TouchableOpacity>
  );
};

export default Settings;