import React, { useState, useEffect } from 'react';
import { ClockWidgetData, WidgetExport } from '../../../types';

interface ClockWidgetProps {
  widget: ClockWidgetData;
  updateWidget: (id: string, update: Partial<ClockWidgetData>) => void
}

export const ClockWidgetComponent: React.FC<ClockWidgetProps> = ({ widget, updateWidget }) => {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  const formatTime = () => {
    const options: Intl.DateTimeFormatOptions = {
      hour: 'numeric',
      minute: '2-digit',
      timeZone: widget.timezone,
      hour12: !widget.use24Hour
    };
    if (widget.showSeconds) {
      options.second = '2-digit';
    }
    return new Intl.DateTimeFormat('en-US', options).format(time);
  };

  return <>
    <div className="time">{formatTime()}</div>
    <div className="timezone">{widget.timezone}</div>
  </>;
};

export const ClockWidgetSettings = ({ widget, updateWidget }: ClockWidgetProps) => {
  const handleToggleSeconds = (e: React.ChangeEvent<HTMLInputElement>) => {
    updateWidget(widget.id, { showSeconds: e.target.checked });
  };

  const handleToggle24Hour = (e: React.ChangeEvent<HTMLInputElement>) => {
    updateWidget(widget.id, { use24Hour: e.target.checked });
  };

  const handleTimezoneChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    updateWidget(widget.id, { timezone: e.target.value });
  };

  return (
    <>
      <div className="seconds-toggle">
        <input
          type="checkbox"
          checked={widget.showSeconds}
          onChange={handleToggleSeconds}
        />
        Show seconds
      </div>
      <div className="hours-toggle">
        <input
          type="checkbox"
          checked={widget.use24Hour}
          onChange={handleToggle24Hour}
        />
        Use 24-hour format
      </div>
      <label>
        Timezone:
        <select value={widget.timezone} onChange={handleTimezoneChange}>
          {Intl.supportedValuesOf('timeZone').map(tz => (
            <option key={tz} value={tz}>
              {tz}
            </option>
          ))}
        </select>
      </label>
    </>
  );
};

export const ClockWidget:WidgetExport = {
  widget: ClockWidgetComponent,
  settings: ClockWidgetSettings
}