'use client';
import { FormContext } from './context/form-context';
import { CheckCircleIcon, XCircleIcon } from '@heroicons/react/24/solid';
import { Background, LoadingSpinner } from '@repo/ui';
import type { PropsWithChildren } from 'react';
import { useContext } from 'react';

function OverlayWrapper({ children }: PropsWithChildren) {
  return (
    <Background className="absolute left-0 top-0 grid h-full w-full place-items-center bg-opacity-80 backdrop-blur-sm">
      <div className="absolute bottom-[50vh] flex flex-row items-center gap-2 md:relative md:bottom-0">
        {children}
      </div>
    </Background>
  );
}
export function Overlay() {
  const { formState } = useContext(FormContext);
  const { status, text } = formState;

  if (status === 'pending')
    return (
      <OverlayWrapper>
        {LoadingSpinner} <p className="font-medium">Загрузка...</p>
      </OverlayWrapper>
    );
  if (status === 'success')
    return (
      <OverlayWrapper>
        <CheckCircleIcon className="h-10 w-10 fill-green-500" title="OK" />{' '}
        <p className="font-medium">Данные сохранены</p>
      </OverlayWrapper>
    );
  if (status === 'error') {
    return (
      <OverlayWrapper>
        <XCircleIcon className="h-10 w-10 fill-red-500" title="Error" />{' '}
        <p className="font-medium">{text}</p>
      </OverlayWrapper>
    );
  }

  return false;
}