import { useNavigation } from '@react-navigation/native';
import React, { useState } from 'react';
import { View, ScrollView, Text } from 'react-native';

import FormButtons from '../../../../components/Button/FormButtons';
import { NavProps } from '../../../../components/Routes/Routes';
import Switch from '../../../../components/Switch/Switch';
import TextField from '../../../../components/TextField/TextField';
import { useUserInfo } from '../../../../hooks/useStorage';
import { useUnitApplicationAdd } from '../../../../hooks/useUnitAdvertising';
import { MembershipApplicationInsertResponse } from '../../../../services/api/APIS/OrganizationUnit/types';
import { showFeedback } from '../../../../services/feedback/showFeedback';

const UnitApplication = () => {
  const navigation = useNavigation<NavProps>();
  const [userInfo] = useUserInfo();

  const [name, setName] = useState('');
  const [surname, setSurname] = useState('');
  const [isYounger, setIsYounger] = useState(false);
  const [parentName, setParentName] = useState('');
  const [parentSurname, setParentSurname] = useState('');
  const [email, setEmail] = useState('');

  const { mutate: createApplication } = useUnitApplicationAdd(
    userInfo.token,
    userInfo.unitId,
    navigation.goBack,
  );

  return (
    <View className="m-4 flex-1 justify-start space-y-4 bg-primary-bg">
      <ScrollView>
        <View>
          <TextField title="Jméno" value={name} setValue={setName} />
        </View>
        <View>
          <TextField title="Přímení" value={surname} setValue={setSurname} />
        </View>

        <View>
          <TextField title="Email" value={email} setValue={setEmail} email />
        </View>

        <View className="flex-row items-center justify-between">
          <Text className="font-bold">Mladší člen</Text>
          <Switch setIsEnabled={setIsYounger} isEnabled={isYounger} />
        </View>

        {isYounger && (
          <View className="space-y-4">
            <View>
              <TextField title="Jméno rodiče" value={parentName} setValue={setParentName} />
            </View>
            <View>
              <TextField title="Přímení rodiče" value={parentSurname} setValue={setParentSurname} />
            </View>
          </View>
        )}

        <FormButtons
          onSubmit={() => {
            let error;
            if (isYounger && !parentSurname) error = 'Vyplňte přímení rodiče.';
            if (isYounger && !parentName) error = 'Vyplňte jméno rodiče.';
            if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(email))
              error = 'Zadejte email ve správném formátu.';
            if (!email) error = 'Vyplňte email.';
            if (!surname) error = 'Vyplňte přímení.';
            if (!name) error = 'Vyplňte jméno.';
            if (error) {
              showFeedback({
                title: error,
                type: 'danger',
              });
              return;
            }
            const newApplication: MembershipApplicationInsertResponse = {
              name,
              surname,
              email,
              isYounger,
              parentName,
              parentSurname,
            };
            createApplication(newApplication);
          }}
        />
      </ScrollView>
    </View>
  );
};

export default UnitApplication;
