'use client';

import React, { useState, useEffect } from 'react';
import AnimatedBottomSheet from '@/components/bottomsheet/AnimatedBottomSheet';
import NotificationBellIcon from '@/components/icons/NotificationBellIcon';
import PlusIcon from '@/components/icons/PlusIcon';
import MinusIcon from '@/components/icons/MinusIcon';
import Button from '../button/PrimaryButton';
import { Button as OutlineButton } from '@/components/ui/button';
import { usePager } from './hooks/usePagerData';
import { toast } from '../Toast';
import { extractErrorMessage } from '@/lib/func';

type PagerModalProps = {
  visible: boolean;
  onClose: () => void;
};

export default function PagerModal({ visible, onClose }: PagerModalProps) {
  const [tableNumber, setTableNumber] = useState(1);
  const { mutate: mutatePager, isPending } = usePager();
  const [message, setMessage] = useState('');
  const handleIncrement = () => {
    setTableNumber((prev) => prev + 1);
  };

  const handleDecrement = () => {
    setTableNumber((prev) => Math.max(1, prev - 1));
  };

  const handlePage = () => {
    mutatePager({ tableNumber: tableNumber.toString(), message: message }, {
      onSuccess: () => {
        handleClose();
        toast('درخواست شما با موفقیت ثبت شد', 'success');
      },
      onError: (error) => {
        toast(extractErrorMessage(error), 'error');
      }
    });
  };

  const handleClose = () => {
    setTableNumber(1);
    onClose();
  };

  useEffect(() => {
    if (!visible) {
      setTableNumber(1);
    }
  }, [visible]);

  return (
    <AnimatedBottomSheet
      visible={visible}
      onClick={handleClose}
      showTitle={false}
      showCloseButton={false}
      overrideClassName="!pt-6 bg-container!"
      blurOpacity={null}
      noBlur={false}
    >
      <div className="px-6 pb-8 flex flex-col">
        <div className='flex justify-center gap-2 border-b border-border pb-10'>
          <NotificationBellIcon width={24} height={24} className="text-foreground" />
          <div className='font-bold'>پیجر گارسون</div>
        </div>

        <div className='mt-6 flex items-center justify-between border-b border-border pb-6'>
          <div className='text-sm font-bold'>شماره میز خود را وارد کنید</div>
          <div className='max-w-[123px] w-full flex justify-between items-center'>

            <button onClick={handleIncrement} className='size-8 bg-[#F2F2F2] rounded-[6px] flex justify-center items-center'>
              <PlusIcon size={14} className="currentColor dark:text-black" />
            </button>

            <div className='pt-1 font-semibold'>{tableNumber}</div>

            <button onClick={handleDecrement} className='size-8 bg-[#F2F2F2] rounded-[6px] flex justify-center items-center'>
              <MinusIcon size={14} className="currentColor dark:text-black" />
            </button>
          </div>
        </div>

        <div className='mt-3'>
          <textarea
            className='w-full px-4 py-2.5 mt-4 text-xs! leading-6 outline-0 border border-border rounded-normal resize-none focus:ring-0'
            placeholder='پیام خود را وارد کنید (اختیاری)'
            id='description'
            name='description'
            value={message}
            onChange={(e) => setMessage(e.target.value)}
          ></textarea>
        </div>

        <div className='mt-7 flex gap-4 items-center'>
          <div className='flex-1'>
            <Button className='h-10 dark:bg-white! dark:text-black!' pending={isPending} onClick={handlePage}>پیج کنید</Button>
          </div>
          <div className='flex-1'>
            <OutlineButton onClick={handleClose} variant="outline" className="w-full bg-white rounded-normal h-10 font-normal text-sm">انصراف</OutlineButton>
          </div>
        </div>

      </div>
    </AnimatedBottomSheet>
  );
}
