<script>
  import { onMount, onDestroy } from "svelte"
  import Formfield from "../Common/Formfield.svelte"
  import { fieldStore } from "../Common/FormfieldStore.js"
  import ClassBuilder from "../ClassBuilder.js"
  import { MDCCheckbox } from "@material/checkbox"
  import { generate } from "shortid"

  export let onClick = item => {}

  export let _bb

  export let id = ""
  export let value = null
  export let label = ""
  export let disabled = false
  export let alignEnd = false
  export let indeterminate = false
  export let checked = false

  let _id
  let instance = null
  let checkbox = null
  let selectedItems

  let context = _bb.getContext("BBMD:input:context")

  onMount(() => {
    _id = generate()

    if (!!checkbox) {
      instance = new MDCCheckbox(checkbox)
      instance.indeterminate = indeterminate
      if (context !== "list-item") {
        let fieldStore = _bb.getContext("BBMD:field-element")
        if (fieldStore) fieldStore.setInput(instance)
      }
    }

    if (context === "checkboxgroup") {
      selectedItems = _bb.getContext("BBMD:checkbox:selectedItemsStore")
    }
  })

  let extras = null

  if (context === "list-item") {
    extras = ["mdc-list-item__meta"]
  }

  const cb = new ClassBuilder("checkbox")
  let modifiers = { disabled }
  let props = { modifiers, extras }

  const blockClass = cb.build({ props })

  function changed(e) {
    const val = e.target.checked
    checked = val
    if (_bb.isBound(_bb.props.checked)) {
      _bb.setStateFromBinding(_bb.props.checked, val)
    }
  }

  function handleOnClick() {
    let item = { _id, label, value }
    if (context === "checkboxgroup") {
      let idx = selectedItems.getItemIdx($selectedItems, _id)
      if (idx > -1) {
        selectedItems.removeItem(_id)
      } else {
        selectedItems.addItem(item)
      }
    } else {
      onClick(item)
    }
  }

  $: isChecked =
    context === "checkboxgroup"
      ? $selectedItems && $selectedItems.findIndex(i => i._id === _id) > -1
      : checked
</script>

<!-- TODO: Customizing Colour and Density - What level of customization for these things does Budibase need here? -->

{#if context !== 'list-item'}
  <Formfield {label} {id} {alignEnd}>
    <div bind:this={checkbox} class={blockClass}>
      <input
        type="checkbox"
        class={cb.elem`native-control`}
        {id}
        {disabled}
        {isChecked}
        on:click={handleOnClick}
        on:change={changed} />
      <div class={cb.elem`background`}>
        <svg class={cb.elem`checkmark`} viewBox="0 0 24 24">
          <path
            class={cb.elem`checkmark-path`}
            fill="none"
            d="M1.73,12.91 8.1,19.28 22.79,4.59" />
        </svg>
        <div class={cb.elem`mixedmark`} />
      </div>
      <div class={cb.elem`ripple`} />
    </div>
  </Formfield>
{:else}
  <div bind:this={checkbox} class={blockClass}>
    <input
      type="checkbox"
      class={cb.elem`native-control`}
      {id}
      {disabled}
      {isChecked}
      on:change={changed}
      on:click={handleOnClick} />
    <div class={cb.elem`background`}>
      <svg class={cb.elem`checkmark`} viewBox="0 0 24 24">
        <path
          class={cb.elem`checkmark-path`}
          fill="none"
          d="M1.73,12.91 8.1,19.28 22.79,4.59" />
      </svg>
      <div class={cb.elem`mixedmark`} />
    </div>
    <div class={cb.elem`ripple`} />
  </div>
{/if}
