clock/src/components/RollClock.tsx

import { useState } from 'react';
import { RollDigit } from './RollDigit';
import './RollClock.css';

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

interface RollClockProps {
  time: string; // "HH:MM:SS" format
  size: number;
  dateInfo: DateInfo;
  period?: string;
  is24Hour: boolean;
  onToggleFormat: () => void;
}

export function RollClock({ time, size, dateInfo, period, is24Hour, onToggleFormat }: RollClockProps) {
  // Roll direction: 'down' = roll down, 'up' = roll up
  const [direction, setDirection] = useState<'down' | 'up'>('down');

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

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

  // Toggle direction
  const toggleDirection = () => {
    setDirection((prev) => (prev === 'down' ? 'up' : 'down'));
  };

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

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

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

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

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

        {/* Direction toggle button */}
        <button
          className="roll-clock-button"
          style={{
            width: `${buttonSize}px`,
            height: `${buttonSize}px`,
            borderRadius: `${buttonSize / 2}px`,
            marginLeft: '8px',
          }}
          onClick={toggleDirection}
        >
          <span
            className="roll-clock-button-text"
            style={{ fontSize: `${buttonSize * 0.6}px` }}
          >
            {direction === 'down' ? '↓' : '↑'}
          </span>
        </button>
      </div>
    </div>
  );
}