import DateRangePicker, { DateRangeOption } from "../../../components/ui/date-range-picker";
import styles from "./overview-controls.module.css";
import { Button } from "@shopify/polaris";
import { RefreshIcon } from "@shopify/polaris-icons";

interface OverviewControlsProps {
  interval: string;
  setInterval: (interval: string) => void;
  refetch:()=>{}
}

export default function OverviewControls({ interval, setInterval , refetch}: OverviewControlsProps) {
  const ranges: DateRangeOption[] = [
    { title: "Today", alias: "TODAY", period: { since: "today", until: "today" } },
    { title: "Last 7 days", alias: "WEEK", period: { since: "yesterday", until: "yesterday" } },
    { title: "Last 30 days", alias: "MONTH", period: { since: "-7d", until: "-1d" } },
    { title: "Last 1 year", alias: "YEAR", period: { since: "-30d", until: "-1d" } },
  ];

  const handleChange = (range: DateRangeOption) => {
    setInterval(range.alias);
  };

  return (
    <div className={styles.container}>
      <h2 className={styles.title}>Overview</h2>
      <div className={styles.controls}>
        <div className={styles.leftControls}>
          <DateRangePicker options={ranges} selectedAlias={interval} onChange={handleChange} />
        </div>

        <div className={styles.rightControls}>
          <span className={styles.updatedText}>Updated now</span>
          <Button onClick={refetch} icon={RefreshIcon}>Reload</Button>
        </div>
      </div>
    </div>
  );
}