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

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

const EventParticipantEdit = () => {
  const { id, personName, days, note, eventId } =
    useRoute<RouteProps<'EventParticipantEdit'>>().params;
  const navigation = useNavigation<NavProps>();
  const [userInfo] = useUserInfo();
  const [currentDays, setCurrentDays] = useState(days);
  const [currentNote, setCurrentNote] = useState(note);

  const { refetchList } = useParticipants(userInfo.token, eventId);
  const { mutate: updateParticipant } = useParticipantGeneralUpdatePost(
    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>
          <FormButtons
            onSubmit={() => {
              const payload = {
                days: currentDays || '',
                note: currentNote || '',
              };
              updateParticipant(payload);
            }}
          />
        </View>
      </ScrollView>
    </View>
  );
};

export default EventParticipantEdit;
