import type { PageContext } from '@star-kitten/lib/discord';
import type { LocationsState } from './state';
import { Page } from './router';
import { StructureType } from '@/lib/db/types/routes';

export default async function (ctx: PageContext<LocationsState>) {
  const isAdd = ctx.custom_id === Page.addLocationModal;
  const location = ctx.state.data.selected;
  return (
    <modal
      title={`${isAdd ? 'Add Location' : 'Edit: ' + ctx.state.data.selected?.short_name || ''}`}
      customId={isAdd ? Page.addLocationModalSubmit : Page.editLocationModalSubmit}
    >
      {isAdd && (
        <label label="Location ID">
          <textInput customId="loc-id" placeholder="Enter the structure id" required />
        </label>
      )}
      <label label="Location Name">
        <textInput customId="loc-name" placeholder="Enter the location name" required value={location?.name} />
      </label>
      <label label="Location Short Name">
        <textInput
          customId="loc-short-name"
          placeholder="Enter the location short name"
          required
          value={location?.short_name}
        />
      </label>
      <label label="System">
        <textInput customId="loc-system" placeholder="Enter the system (e.g. Jita)" required value={location?.system} />
      </label>
      <label label="Structure Type">
        <stringSelect
          customId="loc-structure-type"
          placeholder="Select Structure Type"
          minValues={1}
          maxValues={1}
          required
        >
          {Object.values(StructureType).map((type) => (
            <option label={type} value={type} default={location?.structure_type === type} />
          ))}
        </stringSelect>
      </label>
    </modal>
  );
}