import { Box } from '@mui/system';
import React from 'react';
import { useParams } from 'react-router-dom';
import { useGetCategoryByIdQuery } from '../../store/api';
import Loader from '../../components/Loader';
import Title from '../../components/Title';
import EditForm from '../../components/EditForm';

function EditCategoryPage() {
  const { categoryId } = useParams();
  const { data, isFetching } = useGetCategoryByIdQuery(categoryId);
  return (
    <>
      {isFetching ? <Loader /> :
        <Box sx={{ maxWidth: '450px', m: '20px auto', width: '100%' }}>
          <Title>Edit category</Title>
          <EditForm
            buttonText='Update'
            id={categoryId}
            name={data?.CategoryFindOne?.name}
            categories={data?.CategoryFindOne?.subCategories}
          />
        </Box>
      }
    </>
  )
}

export default EditCategoryPage;