<script>
  import { get } from "svelte/store"
  import {
    ActionButton,
    Modal,
    ModalContent,
    Layout,
    ColorPicker,
    Label,
    Select,
    Button,
  } from "@budibase/bbui"
  import { store } from "builderStore"
  import AppThemeSelect from "./AppThemeSelect.svelte"

  let modal

  const defaultTheme = {
    primaryColor: "var(--spectrum-global-color-blue-600)",
    primaryColorHover: "var(--spectrum-global-color-blue-500)",
    buttonBorderRadius: "16px",
    navBackground: "var(--spectrum-global-color-gray-100)",
    navTextColor: "var(--spectrum-global-color-gray-800)",
  }

  const buttonBorderRadiusOptions = [
    {
      label: "None",
      value: "0",
    },
    {
      label: "Small",
      value: "4px",
    },
    {
      label: "Medium",
      value: "8px",
    },
    {
      label: "Large",
      value: "16px",
    },
  ]

  const updateProperty = property => {
    return e => {
      store.actions.customTheme.save({
        ...get(store).customTheme,
        [property]: e.detail,
      })
    }
  }

  const resetTheme = () => {
    store.actions.customTheme.save(null)
  }
</script>

<div class="container">
  <ActionButton icon="Brush" on:click={modal.show}>Theme</ActionButton>
</div>
<Modal bind:this={modal}>
  <ModalContent
    showConfirmButton={false}
    cancelText="Close"
    showCloseIcon={false}
    title="Theme settings"
  >
    <Layout noPadding gap="S">
      <div class="setting">
        <Label size="L">Theme</Label>
        <AppThemeSelect />
      </div>
      <div class="setting">
        <Label size="L">Button roundness</Label>
        <div class="select-wrapper">
          <Select
            placeholder={null}
            value={$store.customTheme?.buttonBorderRadius ||
              defaultTheme.buttonBorderRadius}
            on:change={updateProperty("buttonBorderRadius")}
            options={buttonBorderRadiusOptions}
          />
        </div>
      </div>
      <div class="setting">
        <Label size="L">Primary color</Label>
        <ColorPicker
          spectrumTheme={$store.theme}
          value={$store.customTheme?.primaryColor || defaultTheme.primaryColor}
          on:change={updateProperty("primaryColor")}
        />
      </div>
      <div class="setting">
        <Label size="L">Primary color (hover)</Label>
        <ColorPicker
          spectrumTheme={$store.theme}
          value={$store.customTheme?.primaryColorHover ||
            defaultTheme.primaryColorHover}
          on:change={updateProperty("primaryColorHover")}
        />
      </div>
      <div class="setting">
        <Label size="L">Navigation bar background color</Label>
        <ColorPicker
          spectrumTheme={$store.theme}
          value={$store.customTheme?.navBackground ||
            defaultTheme.navBackground}
          on:change={updateProperty("navBackground")}
        />
      </div>
      <div class="setting">
        <Label size="L">Navigation bar text color</Label>
        <ColorPicker
          spectrumTheme={$store.theme}
          value={$store.customTheme?.navTextColor || defaultTheme.navTextColor}
          on:change={updateProperty("navTextColor")}
        />
      </div>
    </Layout>
    <div slot="footer">
      <Button secondary quiet on:click={resetTheme}>Reset</Button>
    </div>
  </ModalContent>
</Modal>

<style>
  .container {
    padding-right: 8px;
  }
  .setting {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .select-wrapper {
    width: 100px;
  }
</style>
