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

import FormButtons from '../../../../../../../../../../components/Button/FormButtons';
import { NavProps, RouteProps } from '../../../../../../../../../../components/Routes/Routes';
import TextField from '../../../../../../../../../../components/TextField/TextField';
import {
  useEventDetail,
  useEventGeneralUpdateReportPost,
} from '../../../../../../../../../../hooks/useEvents';
import { useUserInfo } from '../../../../../../../../../../hooks/useStorage';

const UnitAdvertisingNoteEdit = () => {
  const { id } = useRoute<RouteProps<'EventMessageEdit'>>().params;

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

  const { detail, refetch } = useEventDetail(userInfo.token, id);

  const [target, setTarget] = useState(detail?.target || '');
  const [program, setProgram] = useState(detail?.program || '');

  const { mutate: updateNote } = useEventGeneralUpdateReportPost(
    userInfo.token,
    id,
    refetch,
    navigation.goBack,
  );

  return (
    <View className="m-4 flex-1 justify-start bg-primary-bg">
      <TextField title="Cíl akce" value={target || ''} setValue={setTarget} multiline />
      <TextField title="Program akce" value={program || ''} setValue={setProgram} multiline />
      <FormButtons
        onSubmit={() =>
          updateNote({
            target,
            program,
          })
        }
      />
    </View>
  );
};

export default UnitAdvertisingNoteEdit;
