'use client';

import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import React from 'react';
import { DatePicker } from '../DatePicker';
import { MessageFilterParams } from '@/lib/types';
import { Checkbox } from '../ui/checkbox';

export interface MessageFilterProps {
  messageFilter: MessageFilterParams;
}

const MessageFilter: React.FC<MessageFilterProps> = ({ messageFilter }) => {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const { push, refresh } = useRouter();
  return (
    <div className="flex flex-row space-x-4">
      <DatePicker
        date={messageFilter.date}
        setDate={newDate => {
          const params = new URLSearchParams(searchParams);
          params.set('date', newDate);
          push(`${pathname}?${params.toString()}`);
        }}
      />
      <div className="flex items-center space-x-2">
        <Checkbox
          id="include-example"
          checked={messageFilter.includeExamples}
          onCheckedChange={checked => {
            const params = new URLSearchParams(searchParams);
            params.set('includeExamples', String(checked));
            push(`${pathname}?${params.toString()}`);
          }}
        />
        <label
          htmlFor="terms"
          className="include-example font-medium leading-none"
        >
          Include examples
        </label>
      </div>
    </div>
  );
};

export default MessageFilter;