import { Button } from '@gouvfr-lasuite/cunningham-react';
import { useRouter } from 'next/router';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';

import { Icon } from '@/components';
import { useCreateDoc } from '@/docs/doc-management';
import { useSkeletonStore } from '@/features/skeletons';

import { useLeftPanelStore } from '../stores';

export const LeftPanelHeaderButton = () => {
  const router = useRouter();
  const { t } = useTranslation();
  const { closePanel } = useLeftPanelStore();
  const { setIsSkeletonVisible } = useSkeletonStore();
  const [isNavigating, setIsNavigating] = useState(false);

  const { mutate: createDoc, isPending: isDocCreating } = useCreateDoc({
    onSuccess: (doc) => {
      setIsNavigating(true);
      // Wait for navigation to complete
      router
        .push(`/docs/${doc.id}`)
        .then(() => {
          // The skeleton will be disabled by the [id] page once the data is loaded
          setIsNavigating(false);
          closePanel({ type: 'mobile' });
        })
        .catch(() => {
          // In case of navigation error, disable the skeleton
          setIsSkeletonVisible(false);
          setIsNavigating(false);
        });
    },
    onError: () => {
      // If there's an error, disable the skeleton
      setIsSkeletonVisible(false);
      setIsNavigating(false);
    },
  });

  const handleClick = () => {
    setIsSkeletonVisible(true);
    createDoc();
  };

  const isLoading = isDocCreating || isNavigating;

  return (
    <Button
      data-testid="new-doc-button"
      color="brand"
      onClick={handleClick}
      icon={<Icon $color="inherit" iconName="add" aria-hidden="true" />}
      disabled={isLoading}
    >
      {t('New doc')}
    </Button>
  );
};
