import { useCutsceneStore, useSelectedCutscene } from '../../store/cutsceneStore';
import type { Cutscene } from '../../types/cutscene';
import styles from './RightPanel.module.css';

type CutscenePatch = Partial<Omit<Cutscene, 'imageSegments' | 'lines'>>;

function NumField({ label, value, onChange, min }: {
  label: string; value: number; onChange: (v: number) => void; min?: number;
}) {
  return (
    <div className={styles.field}>
      <label>{label}</label>
      <input
        type="number"
        value={value}
        min={min}
        onChange={e => onChange(Number(e.target.value))}
      />
    </div>
  );
}

export default function CutsceneProperties() {
  const cutscene = useSelectedCutscene();
  const updateCutscene = useCutsceneStore(s => s.updateCutscene);

  if (!cutscene) return <div className={styles.empty}>No cutscene selected</div>;

  function upd(patch: CutscenePatch) {
    updateCutscene(cutscene!.id, patch);
  }

  return (
    <div className={styles.section}>
      <div className={styles.sectionTitle}>Cutscene</div>

      <div className={styles.field}>
        <label>ID</label>
        <input
          type="text"
          value={cutscene.id}
          onChange={e => upd({ id: e.target.value })}
        />
      </div>

      <div className={styles.field}>
        <label>Skippable</label>
        <input
          type="checkbox"
          checked={cutscene.skippable}
          onChange={e => upd({ skippable: e.target.checked })}
        />
      </div>

      <NumField label="Duration (ms)" value={cutscene.durationMs} onChange={v => upd({ durationMs: v })} min={0} />
      <NumField label="Fade out (ms)" value={cutscene.fadeOutMs} onChange={v => upd({ fadeOutMs: v })} min={0} />
      <NumField label="Fade in (ms)" value={cutscene.fadeInMs} onChange={v => upd({ fadeInMs: v })} min={0} />
      <NumField label="End fade out (ms)" value={cutscene.endFadeOutMs} onChange={v => upd({ endFadeOutMs: v })} min={0} />
      <NumField label="End fade in (ms)" value={cutscene.endFadeInMs} onChange={v => upd({ endFadeInMs: v })} min={0} />

      <div className={styles.field}>
        <label>onFadeIn callback</label>
        <input
          type="text"
          value={cutscene.onFadeInCallback}
          onChange={e => upd({ onFadeInCallback: e.target.value })}
          placeholder="lua function name"
        />
      </div>
    </div>
  );
}