<script>
  import { Row, Col, Button, Icon } from "sveltestrap";

  import { storeMdjs } from "@/stores/mdjs.store";
  import { XmlConverter } from "@/libs/xml-converter/xml-converter";

  import InputField from "./elements/InputField.svelte";

  export let field;
  export let extents = [];
  export let value = {};
  export let id = 0;
  export let error;
  export let onRemoveItem = false;
  export let onSaveItem = false;
  export let advancedMode = false;

  $: isReady = $storeMdjs;
  $: extentName = getValue(value, "extentName");
  $: geographicExtentWestBound = getValue(value, "geographicExtentWestBound");
  $: geographicExtentEastBound = getValue(value, "geographicExtentEastBound");
  $: geographicExtentSouthBound = getValue(value, "geographicExtentSouthBound");
  $: geographicExtentNorthBound = getValue(value, "geographicExtentNorthBound");

  const converter = new XmlConverter();

  function getValue(md, fieldName) {
    return converter.getValue(md, fieldName)[0] || "";
  }

  function onSave(fieldName, fieldValue, space) {
    if (fieldName == "extentName") {
      const extent = extents.find((item) => item.value == fieldValue);
      if (extent) {
        value = converter.setValue(value, "geographicExtentWestBound", [
          extent.west,
        ]);
        value = converter.setValue(value, "geographicExtentEastBound", [
          extent.east,
        ]);
        value = converter.setValue(value, "geographicExtentSouthBound", [
          extent.south,
        ]);
        value = converter.setValue(value, "geographicExtentNorthBound", [
          extent.north,
        ]);
      }
    }
    value = converter.setValue(value, fieldName, [fieldValue]);
    onSaveItem(id, value);
  }

  function onRemove(e) {
    e.preventDefault();
    e.stopPropagation();
    if (onRemoveItem) {
      onRemoveItem(id);
    }
  }
</script>

{#if isReady}
  <Row>
      {#if advancedMode}
      <Col md="3">
        <InputField
          type={field.extentName.type}
          value={extentName}
          {error}
          field={field.extentName.name}
          list={extents}
          {onSave}
        />
      </Col>
      <Col md="2">
        <InputField
          type={field.geographicExtentWestBound.type}
          value={geographicExtentWestBound}
          {error}
          field={field.geographicExtentWestBound.name}
          {onSave}
        />
      </Col>
      <Col md="2">
        <InputField
          type={field.geographicExtentEastBound.type}
          value={geographicExtentEastBound}
          {error}
          field={field.geographicExtentEastBound.name}
          {onSave}
        />
      </Col>
      <Col md="2">
        <InputField
          type={field.geographicExtentSouthBound.type}
          value={geographicExtentSouthBound}
          {error}
          field={field.geographicExtentSouthBound.name}
          {onSave}
        />
      </Col>
      <Col md="2">
        <InputField
          type={field.geographicExtentNorthBound.type}
          value={geographicExtentNorthBound}
          {error}
          field={field.geographicExtentNorthBound.name}
          {onSave}
        />
      </Col>
    {:else}
        <Col md="6">
        <InputField
          type={field.extentName.type}
          value={extentName}
          {error}
          field={field.extentName.name}
          list={extents}
          {onSave}
        />
      </Col>
    {/if}
    <Col md="1">
      <Button
        color="dark"
        outline
        class="mx-auto py-1 px-2"
        on:click={onRemove}
      >
        <Icon name="dash" />
      </Button>
    </Col>
  </Row>
{/if}

<style>
</style>
