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

import FormButtons from '../../../../../../../../../../components/Button/FormButtons';
import Title from '../../../../../../../../../../components/List/components/Title';
import { NavProps, RouteProps } from '../../../../../../../../../../components/Routes/Routes';
import Switch from '../../../../../../../../../../components/Switch/Switch';
import TextField from '../../../../../../../../../../components/TextField/TextField';
import {
  useParticipantCampUpdatePost,
  useParticipants,
} from '../../../../../../../../../../hooks/useCamps';
import { useUserInfo } from '../../../../../../../../../../hooks/useStorage';

const CampParticipantEdit = () => {
  const { id, personName, isEstimate, isReal, days, note, campId } =
    useRoute<RouteProps<'CampParticipantEdit'>>().params;
  const navigation = useNavigation<NavProps>();
  const [userInfo] = useUserInfo();
  const [currentIsEstimate, setCurrentIsEstimate] = useState(isEstimate);
  const [currentIsReal, setCurrentIsReal] = useState(isReal);
  const [currentDays, setCurrentDays] = useState(days);
  const [currentNote, setCurrentNote] = useState(note);

  const { refetchList } = useParticipants(userInfo.token, campId);
  const { mutate: updateParticipant } = useParticipantCampUpdatePost(
    userInfo.token,
    id,
    refetchList,
    navigation.goBack,
  );

  return (
    <View className="m-4 flex-1 justify-start bg-primary-bg">
      <ScrollView>
        <Title text={personName} classNames="mb-4" />
        <View className="mb-4">
          <TextField
            title="Skutečný počet dní"
            value={currentDays}
            setValue={setCurrentDays}
            number
          />
        </View>
        <View className="mb-4">
          <TextField title="Poznámka" value={currentNote} setValue={setCurrentNote} multiline />
        </View>
        <View className="flex-row items-center justify-between">
          <Text className="font-bold">Předpokládaná účast</Text>
          <Switch setIsEnabled={setCurrentIsEstimate} isEnabled={currentIsEstimate} />
        </View>
        <View className="flex-row items-center justify-between">
          <Text className="font-bold">Skutečná účast</Text>
          <Switch setIsEnabled={setCurrentIsReal} isEnabled={currentIsReal} />
        </View>

        <View>
          <FormButtons
            onSubmit={() => {
              const payload = {
                isEstimate: currentIsEstimate,
                isReal: currentIsReal,
                days: currentDays || '',
                note: currentNote || '',
              };
              updateParticipant(payload);
            }}
          />
        </View>
      </ScrollView>
    </View>
  );
};

export default CampParticipantEdit;
