import React, { useState } from 'react'
import Filter from './Filter'

export default { title: 'search/Filter' }

const FilterHooked = () => {
  const [dummyState, setDummyState] = useState(null)
  return (
    <>
      <Filter
        label='Test Filter'
        name='demo'
        attributes={[
          { key: 'Option 1' },
          { key: 'Option 2' },
          { key: 'Option 3' },
          { key: 'Option 4' }
        ]}
        value={dummyState}
        searchFilterChange={({ demo }) => {
          setDummyState(demo)
        }}
      />
      <pre>Filter: {JSON.stringify(dummyState)}</pre>
    </>
  )
}

export const filter = () => <FilterHooked />

const FilterWithDefaultValueHooked = () => {
  const [dummyState, setDummyState] = useState('Option 3')
  return (
    <>
      <Filter
        label='Test Filter'
        name='demo'
        attributes={[
          { key: 'Option 1' },
          { key: 'Option 2' },
          { key: 'Option 3' },
          { key: 'Option 4' }
        ]}
        value={dummyState}
        searchFilterChange={({ demo }) => {
          setDummyState(demo)
        }}
      />
      <pre>Tag: {JSON.stringify(dummyState)}</pre>
    </>
  )
}

export const filterWithDefaultValue = () => <FilterWithDefaultValueHooked />

const FilterColorHooked = () => {
  const [dummyState, setDummyState] = useState(null)
  return (
    <>
      <Filter
        label='Test Color Filter'
        name='colors'
        columns={2}
        attributes={[
          { key: 'Brown' },
          { key: 'Green' },
          { key: 'White' },
          { key: 'Black' },
          { key: 'Blue' },
          { key: 'Red' }
        ]}
        value={dummyState}
        searchFilterChange={({ colors }) => {
          setDummyState(colors)
        }}
      />
      <pre>Color: {JSON.stringify(dummyState)}</pre>
    </>
  )
}

export const colorFilter = () => <FilterColorHooked />
(function ($, api) {
  "use strict";

  api.controlConstructor['jeg-preset'] = api.controlConstructor.default.extend({
    ready: function () {
      var control = this,
        selectValue,
        element = control.container.find( 'select' );

      $( element ).selectize();

      // Trigger a change
      this.container.on('change', 'select', function () {

        // Get the control's value
        selectValue = $(this).val();

        // Update the value using the customizer API and trigger the "save" button
        control.setting.set(selectValue);

        // We have to get the choices of this control
        // and then start parsing them to see what we have to do for each of the choices.
        $.each(control.params.choices, function (key, value) {

          // If the current value of the control is the key of the choice,
          // then we can continue processing, Otherwise there's no reason to do anything.
          if (selectValue === key) {
            // Each choice has an array of settings defined in it.
            // We'll have to loop through them all and apply the changes needed to them.
            $.each(value.settings, function (presetControl, presetSettingValue) {
              jegSetSettingValue(presetControl, presetSettingValue);
            });
          }
        });
      });
    }
  });
})(jQuery, wp.customize);

import React from 'react'
import TextInput from '../Search/TextInput'
import Filter from '../Search/Filter'
import styles from './SearchUi.module.scss'

const FreeTemplateKits = ({ searchParams, onSearchSubmitted, aggregations }) => {
  return (
    <div className={styles.wrapper}>
      <TextInput
        searchParams={searchParams} onSearchSubmitted={(args) => {
          onSearchSubmitted({ ...args })
        }}
      />
      {aggregations
        ? (
          <div className={styles.searchFilter}>
            {aggregations.industries
              ? (
                <Filter
                  searchFilterChange={(args) => {
                    onSearchSubmitted({ ...searchParams, ...args })
                  }}
                  label='Categories'
                  name='industry'
                  value={searchParams.industries}
                  attributes={aggregations.industries}
                />
                )
              : null}
          </div>
          )
        : null}
    </div>
  )
}

export default FreeTemplateKits