import { useState } from 'react';
import { FlipDigit } from './FlipDigit';
import './FlipClock.css';

interface DateInfo {
  dateString: string;
  weekday: string;
}

interface FlipClockProps {
  time: string; // "HH:MM:SS" format
  size: number;
  dateInfo: DateInfo;
  period?: string;
}

export function FlipClock({ time, size, dateInfo, period }: FlipClockProps) {
  const [is24Hour, setIs24Hour] = useState(true);

  // Parse time - it's already in 12h format when period is provided
  const [hoursStr, minutes, seconds] = time.split(':');
  const displayHours = hoursStr;

  const periodSize = size * 0.20;
  const dateSize = size * 0.20;

  return (
    <div className="flip-clock-outer">
      <div className="flip-clock-side-panel">
        <button
          className="flip-format-toggle"
          onClick={() => setIs24Hour(!is24Hour)}
        >
          {is24Hour ? '24H' : '12H'}
        </button>
      </div>
      <div className="flip-clock-main">
        <div className="flip-clock-header">
          <div className="flip-clock-header-left">
            {period && (
              <span
                className="flip-clock-period"
                style={{ fontSize: `${periodSize}px` }}
              >
                {period}
              </span>
            )}
          </div>
          <span
            className="flip-clock-date"
            style={{ fontSize: `${dateSize}px` }}
          >
            {dateInfo.dateString} {dateInfo.weekday}
          </span>
        </div>
        <div className="flip-clock-container">
          {/* Hours */}
          <div className="flip-clock-digit-group">
            <FlipDigit value={parseInt(displayHours[0], 10)} size={size} />
            <FlipDigit value={parseInt(displayHours[1], 10)} size={size} />
          </div>

          <span
            className="flip-clock-separator"
            style={{
              fontSize: `${size * 0.5}px`,
              marginTop: `${-size * 0.08}px`
            }}
          >
            :
          </span>

          {/* Minutes */}
          <div className="flip-clock-digit-group">
            <FlipDigit value={parseInt(minutes[0], 10)} size={size} />
            <FlipDigit value={parseInt(minutes[1], 10)} size={size} />
          </div>

          <span
            className="flip-clock-separator"
            style={{
              fontSize: `${size * 0.5}px`,
              marginTop: `${-size * 0.08}px`
            }}
          >
            :
          </span>

          {/* Seconds */}
          <div className="flip-clock-digit-group">
            <FlipDigit value={parseInt(seconds[0], 10)} size={size} />
            <FlipDigit value={parseInt(seconds[1], 10)} size={size} />
          </div>
        </div>
      </div>
    </div>
  );
}