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

import FormButtons from '../../../../../../components/Button/FormButtons';
import { NavProps } from '../../../../../../components/Routes/Routes';
import TextField from '../../../../../../components/TextField/TextField';
import { useUserInfo } from '../../../../../../hooks/useStorage';
import {
  useUnitAdvertisingDetail,
  useUnitAdvertisingDetailUpdate,
} from '../../../../../../hooks/useUnitAdvertising';

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

  const { data: advertising, refetch: refetchNote } = useUnitAdvertisingDetail(
    userInfo.token,
    userInfo.unitId,
    true,
  );

  const [currentNote, setCurrentNote] = useState(advertising?.note || '');
  const { mutate: updateNote } = useUnitAdvertisingDetailUpdate(
    userInfo.token,
    userInfo.unitId,
    refetchNote,
  );

  return (
    <View className="m-4 flex-1 justify-start bg-primary-bg">
      <TextField title="Poznámka" value={currentNote || ''} setValue={setCurrentNote} multiline />
      <FormButtons
        onSubmit={() => {
          updateNote(currentNote);
          navigation.goBack();
        }}
      />
    </View>
  );
};

export default UnitAdvertisingNoteEdit;
