turash/bugulma/frontend/components/ui/DateRangePicker.tsx

import React from 'react';
import { Calendar } from 'lucide-react';
import Button from '@/components/ui/Button.tsx';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/DropdownMenu.tsx';
import { useTranslation } from '@/hooks/useI18n.tsx';

export type DateRangePreset = '7d' | '30d' | '90d' | '1y' | 'all';

export interface DateRange {
  startDate: Date | null;
  endDate: Date | null;
  preset: DateRangePreset;
}

interface DateRangePickerProps {
  value: DateRange;
  onChange: (range: DateRange) => void;
  className?: string;
}

const DateRangePicker = ({ value, onChange, className }: DateRangePickerProps) => {
  const { t } = useTranslation();

  const getPresetDates = (preset: DateRangePreset): { startDate: Date | null; endDate: Date | null } => {
    const now = new Date();
    const endDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());

    switch (preset) {
      case '7d': {
        const startDate = new Date(endDate);
        startDate.setDate(startDate.getDate() - 7);
        return { startDate, endDate };
      }
      case '30d': {
        const startDate = new Date(endDate);
        startDate.setDate(startDate.getDate() - 30);
        return { startDate, endDate };
      }
      case '90d': {
        const startDate = new Date(endDate);
        startDate.setDate(startDate.getDate() - 90);
        return { startDate, endDate };
      }
      case '1y': {
        const startDate = new Date(endDate);
        startDate.setFullYear(startDate.getFullYear() - 1);
        return { startDate, endDate };
      }
      case 'all':
      default:
        return { startDate: null, endDate: null };
    }
  };

  const handlePresetSelect = (preset: DateRangePreset) => {
    const dates = getPresetDates(preset);
    onChange({
      ...dates,
      preset,
    });
  };

  const getPresetLabel = (preset: DateRangePreset): string => {
    switch (preset) {
      case '7d':
        return t('dateRange.last7Days', 'Last 7 days');
      case '30d':
        return t('dateRange.last30Days', 'Last 30 days');
      case '90d':
        return t('dateRange.last90Days', 'Last 90 days');
      case '1y':
        return t('dateRange.lastYear', 'Last year');
      case 'all':
        return t('dateRange.allTime', 'All time');
      default:
        return '';
    }
  };

  const formatDateRange = (): string => {
    if (value.preset === 'all') {
      return getPresetLabel('all');
    }
    if (value.startDate && value.endDate) {
      const start = value.startDate.toLocaleDateString();
      const end = value.endDate.toLocaleDateString();
      return `${start} - ${end}`;
    }
    return getPresetLabel(value.preset);
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="sm" className={className}>
          <Calendar className="h-4 w-4 mr-2" />
          {formatDateRange()}
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-48">
        <DropdownMenuItem onClick={() => handlePresetSelect('7d')}>
          {getPresetLabel('7d')}
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => handlePresetSelect('30d')}>
          {getPresetLabel('30d')}
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => handlePresetSelect('90d')}>
          {getPresetLabel('90d')}
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => handlePresetSelect('1y')}>
          {getPresetLabel('1y')}
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => handlePresetSelect('all')}>
          {getPresetLabel('all')}
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
};

export default DateRangePicker;