import { format } from 'date-fns';
import { ru } from 'date-fns/locale';
import { CalendarIcon, Printer, X } from 'lucide-react';
import { Dispatch, SetStateAction } from 'react';

import { useTextController } from '@/shared/language/hooks/use-text-controller';
import { Button } from '@/shared/shadcn-ui/button';
import { Calendar } from '@/shared/shadcn-ui/calendar';
import { Label } from '@/shared/shadcn-ui/label';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/shared/shadcn-ui/popover';

interface TransactionsTableHeaderProps {
  startDate: Date | undefined;
  setStartDate: Dispatch<SetStateAction<Date | undefined>>;
  endDate: Date | undefined;
  setEndDate: Dispatch<SetStateAction<Date | undefined>>;
}

export const TransactionsTableHeader = ({
  startDate,
  setStartDate,
  endDate,
  setEndDate,
}: TransactionsTableHeaderProps) => {
  const { t } = useTextController();

  return (
    <div className='flex flex-col items-start justify-between gap-4 md:flex-row md:items-center'>
      <div className='flex items-center justify-between max-md:w-full'>
        <h2 className='text-2xl font-bold'>
          {t('corporate.transactions.title')}
        </h2>
        <Button
          size={'icon'}
          variant={'outline'}
          onClick={() => window.print()}
          className='flex md:hidden'
        >
          <Printer />
        </Button>
      </div>

      <div className='flex w-full flex-col justify-center gap-4 md:w-auto md:flex-row'>
        <Button
          size={'icon'}
          variant={'outline'}
          onClick={() => window.print()}
          className='hidden md:flex'
        >
          <Printer />
        </Button>

        <div className='grid gap-2 sm:grid-cols-2'>
          <div className='flex items-center gap-2'>
            <Label htmlFor='start-date'>
              {t('corporate.transactions.dateFrom')}
            </Label>
            <Popover>
              <PopoverTrigger asChild>
                <Button
                  variant='outline'
                  className='w-full justify-start text-left font-normal'
                >
                  <CalendarIcon className='mr-2 h-4 w-4' />
                  {startDate
                    ? format(startDate, 'PP', { locale: ru })
                    : 'Выберите дату'}
                </Button>
              </PopoverTrigger>
              <PopoverContent className='w-auto p-0'>
                <Calendar
                  mode='single'
                  selected={startDate}
                  onSelect={setStartDate}
                  initialFocus
                />
              </PopoverContent>
              <Button variant='ghost' onClick={() => setStartDate(undefined)}>
                <X className='mr-2 h-4 w-4' />
              </Button>
            </Popover>
          </div>

          <div className='flex items-center gap-2'>
            <Label htmlFor='end-date'>
              {t('corporate.transactions.dateTo')}
            </Label>
            <Popover>
              <PopoverTrigger asChild>
                <Button
                  variant='outline'
                  className='w-full justify-start text-left font-normal'
                >
                  <CalendarIcon className='mr-2 h-4 w-4' />
                  {endDate
                    ? format(endDate, 'PP', { locale: ru })
                    : t('corporate.transactions.selectDate')}
                </Button>
              </PopoverTrigger>
              <PopoverContent className='w-auto p-0'>
                <Calendar
                  mode='single'
                  selected={endDate}
                  onSelect={setEndDate}
                  initialFocus
                />
              </PopoverContent>
              <Button variant='ghost' onClick={() => setEndDate(undefined)}>
                <X className='mr-2 h-4 w-4' />
              </Button>
            </Popover>
          </div>
        </div>
      </div>
    </div>
  );
};
