import { useState } from "react";
import type { JsonObject } from "../editorCore";
import {
  getMapDims,
  getMapRows,
  resizeRows,
} from "./worldshaperShared";

export function MapLayoutPanel({
  record,
  patchSelectedRecord,
  onReloadFromSource,
  hasPendingRecordChanges,
  isLoading,
}: {
  record: JsonObject;
  patchSelectedRecord: (mutator: (rec: JsonObject) => JsonObject) => void;
  onReloadFromSource: () => Promise<void>;
  hasPendingRecordChanges: boolean;
  isLoading: boolean;
}) {
  const { width, height, tileSize, rows } = getMapDims(record);
  const rowsText = rows.join("\n");
  const [isReloading, setIsReloading] = useState(false);

  return (
    <div className="map-layout-panel">
      <div className="fields-grid">
        <div className="field-row">
          <label htmlFor="map-width">Width</label>
          <input
            id="map-width"
            type="number"
            min={1}
            max={512}
            value={width}
            onChange={(event) => {
              const nextWidth = Math.max(1, parseInt(event.target.value, 10) || 1);
              patchSelectedRecord((rec) => ({
                ...rec,
                width: nextWidth,
                rows: resizeRows(getMapRows(rec), nextWidth, getMapDims(rec).height),
              }));
            }}
          />
        </div>
        <div className="field-row">
          <label htmlFor="map-height">Height</label>
          <input
            id="map-height"
            type="number"
            min={1}
            max={512}
            value={height}
            onChange={(event) => {
              const nextHeight = Math.max(1, parseInt(event.target.value, 10) || 1);
              patchSelectedRecord((rec) => ({
                ...rec,
                height: nextHeight,
                rows: resizeRows(getMapRows(rec), getMapDims(rec).width, nextHeight),
              }));
            }}
          />
        </div>
        <div className="field-row">
          <label htmlFor="map-tile-size">Tile Size (px)</label>
          <input
            id="map-tile-size"
            type="number"
            min={8}
            max={128}
            step={8}
            value={tileSize}
            onChange={(event) => {
              const nextSize = Math.max(8, Math.min(128, parseInt(event.target.value, 10) || 32));
              patchSelectedRecord((rec) => ({ ...rec, tileSize: nextSize }));
            }}
          />
        </div>
      </div>

      <div className="field-row" style={{ marginTop: 8 }}>
        <button
          type="button"
          className="mini-btn"
          disabled={isReloading || isLoading || hasPendingRecordChanges}
          onClick={() => {
            setIsReloading(true);
            onReloadFromSource().finally(() => setIsReloading(false));
          }}
        >
          {isReloading ? "Reloading..." : "Reload Map Data"}
        </button>
      </div>

      <div className="map-rows-field">
        <label htmlFor="map-rows-textarea">Rows</label>
        <p className="muted">One row string per line. Width/height will pad or trim rows.</p>
        <textarea
          id="map-rows-textarea"
          className="map-rows-textarea"
          value={rowsText}
          spellCheck={false}
          onChange={(event) => {
            const nextRows = event.target.value.split("\n");
            patchSelectedRecord((rec) => ({
              ...rec,
              rows: nextRows,
              height: nextRows.length,
            }));
          }}
        />
      </div>
    </div>
  );
}



