import { useCallback } from 'react';
import { Button } from '@ablogcms/components/button';
import { Select } from '@ablogcms/components/select';
import TimePicker from '@ablogcms/components/time-picker';
import DatePicker from '@ablogcms/components/date-picker';

import type { RuleType, TimeMachineState } from '../../types';

const EMPTY_RULES: RuleType[] = [];

interface TimeMachineFormProps {
  state: TimeMachineState;
  rules?: RuleType[];
  onChange?: (state: TimeMachineState) => void;
  onSubmit?: () => void;
}

function TimeMachineForm({
  state,
  rules = EMPTY_RULES,
  onChange = () => {},
  onSubmit = () => {},
}: TimeMachineFormProps) {
  const handleDateChange = (date: string) => {
    onChange({ ...state, date });
  };

  const handleTimeChange = (time: string) => {
    onChange({ ...state, time });
  };

  const handleRuleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    onChange({ ...state, ruleId: parseInt(event.target.value, 10) });
  };

  const handleClick = useCallback(() => {
    onSubmit();
  }, [onSubmit]);

  return (
    <div className="acms-admin-timemachine-form">
      <div>
        <DatePicker value={state.date} onChange={handleDateChange} width="mini" />
      </div>
      <div>
        <TimePicker value={state.time} onChange={handleTimeChange} width="mini" />
      </div>
      <div>
        <Select value={state.ruleId} onChange={handleRuleChange}>
          <option value={0}>ルールなし</option>
          {rules.map((rule) => (
            <option value={rule.id} key={rule.id}>
              {rule.label}
            </option>
          ))}
        </Select>
      </div>
      <div>
        {/* acms-admin-btn-admin は Button の variant 合成モデルとは別の独立クラス体系のため unstyled + className で再現する */}
        <Button unstyled className="acms-admin-btn-admin acms-admin-text-nowrap" onClick={handleClick}>
          {ACMS.i18n('preview.change')}
        </Button>
      </div>
    </div>
  );
}

export default TimeMachineForm;
