const datas = {
  serious: {
    padding: 7,
    padding_image: 7,
    border_size: 2 ,
    border_radius: 0,
    image: '1/1',
    col: 4,
    format: 'column',
    sidebar_archive: 'hidden',
    color_set: 'wb',
    opts: {
      //wpboutik_general_font_size: 14,
      wpboutik_single_product_title_font_size: 30,
      wpboutik_single_price_font_size: 22,
      wpboutik_cat_display: 'wpb-link',
      wpboutik_single_have_excerpt: false,
      wpboutik_single_excerpt_size: 14,
      wpboutik_gallery_position: '2',
      wpboutik_gallery_align: 'end',
      wpboutik_qty_align: 'calc(50% - .5rem)',
      wpboutik_slideshow_images: false,
      wpboutik_show_sidebar: 'hidden',
      wpboutik_number_related_products: 4
    }
  }, 
  pro : {
    padding: 7,
    padding_image: 0,
    border_size: 2,
    border_radius: 7,
    image: '1/1',
    col: 1,
    format: 'row',
    sidebar_archive: 'right',
    color_set: 'neutral',
    opts: {
      //wpboutik_general_font_size: 16,
      wpboutik_single_product_title_font_size: 24,
      wpboutik_single_price_font_size: 20,
      wpboutik_cat_display: 'wpb-btn',
      wpboutik_single_have_excerpt: false,
      wpboutik_gallery_position: '-1',
      wpboutik_gallery_align: 'start',
      wpboutik_qty_align: '100%',
      wpboutik_slideshow_images: true,
      wpboutik_show_sidebar: 'right',
      wpboutik_number_related_products: 1
    }
  },
  nice : {
    padding: 15,
    padding_image: 15,
    border_size: 2,
    border_radius: 17, 
    image: '16/9',
    col: 3,
    format: 'column',
    sidebar_archive: 'left',
    color_set: 'modern',
    opts: {
      //wpboutik_general_font_size: 18,
      wpboutik_single_product_title_font_size: 30,
      wpboutik_single_price_font_size: 23,
      wpboutik_cat_display: 'wpb-btn',
      wpboutik_single_have_excerpt: true,
      //wpboutik_single_excerpt_length: 37,
      wpboutik_single_excerpt_size: 14,
      wpboutik_gallery_position: '2',
      wpboutik_gallery_align: 'start',
      wpboutik_qty_align: '100%',
      wpboutik_slideshow_images: false,
      wpboutik_show_sidebar: 'left',
      wpboutik_number_related_products: 3
    }
  },
  fun: {
    padding: 20,
    padding_image: 0,
    border_size: 2,
    border_radius: 30,
    image: '9/16',
    col: 2,
    format: 'row',
    sidebar_archive: 'hidden',
    color_set: 'sunlight',
    opts: {
      //wpboutik_general_font_size: 16,
      wpboutik_single_product_title_font_size: 25,
      wpboutik_single_price_font_size: 18,
      wpboutik_cat_display: 'wpb-link',
      wpboutik_single_have_excerpt: true,
      //wpboutik_single_excerpt_length: '',
      wpboutik_single_excerpt_size: 14,
      wpboutik_gallery_position: '-1',
      wpboutik_gallery_align: 'center',
      wpboutik_qty_align: 'calc(50% - .5rem)',
      wpboutik_slideshow_images: true,
      wpboutik_show_sidebar: 'right',
      wpboutik_number_related_products: 2
    }
  },
  minimaliste: {
    padding: 7,
    padding_image: 7,
    border_size: 0,
    border_radius: 0,
    image: '1/1',
    col: 3,
    format: 'column',
    sidebar_archive: 'hidden',
    color_set: 'wb',
    opts: {
      //wpboutik_general_font_size: 14,
      wpboutik_single_product_title_font_size: 30,
      wpboutik_single_price_font_size: 22,
      wpboutik_cat_display: 'wpb-link',
      wpboutik_single_have_excerpt: true,
      wpboutik_single_excerpt_size: 14,
      wpboutik_gallery_position: '-1',
      wpboutik_gallery_align: 'start',
      wpboutik_qty_align: 'calc(50% - .5rem)',
      wpboutik_slideshow_images: true,
      wpboutik_show_sidebar: 'hidden',
      wpboutik_number_related_products: 3,
      wpboutik_show_cart_sidebar: 'hidden'
    }
  },
  maximaliste: {
    padding: 7,
    padding_image: 0,
    border_size: 2,
    border_radius: 20,
    image: '16/9',
    col: 3,
    format: 'column',
    sidebar_archive: 'right',
    color_set: 'sunlight',
    opts: {
      //wpboutik_general_font_size: 16,
      wpboutik_single_product_title_font_size: 24,
      wpboutik_single_price_font_size: 20,
      wpboutik_single_have_cat: true,
      wpboutik_cat_display: 'wpb-btn',
      wpboutik_single_have_excerpt: true,
      wpboutik_gallery_position: '2',
      wpboutik_gallery_align: 'start',
      wpboutik_qty_align: '100%',
      wpboutik_slideshow_images: true,
      wpboutik_show_sidebar: 'right',
      wpboutik_number_related_products: 3
    }
  },
  funky: {
    padding: 7,
    padding_image: 7,
    border_size: 3,
    border_radius: 30,
    image: '16/9',
    col: 6,
    format: 'columns',
    sidebar_archive: 'hidden',
    opts: {
      //wpboutik_general_font_size: 14,
      wpboutik_single_product_title_font_size: 30,
      wpboutik_single_price_font_size: 27,
      wpboutik_cat_display: 'wpb-btn',
      wpboutik_single_have_excerpt: false,
      wpboutik_single_excerpt_size: 15,
      wpboutik_gallery_position: '-1',
      wpboutik_gallery_align: 'start',
      wpboutik_qty_align: '100%',
      wpboutik_slideshow_images: true,
      wpboutik_show_sidebar: 'hidden',
      wpboutik_number_related_products: 6,
      wpboutik_show_cart_sidebar: 'hidden',
      wpboutik_background_color_labels: '#c9622e',
      wpboutik_backgroundcolor_button: '#16afaa',
      wpboutik_hovercolor_button: '#00a377',
      wpboutik_button_text_color: '#d7edf4',
      wpboutik_title_product_color: '#093452', 
      wpboutik_title_widget_color: '#093452', 
      wpboutik_title_product_color_on_hover: '#4ab2ab',
      wpboutik_price_product_color: '#e8ca20',
      wpboutik_bordercolor_products: '#e2ae34',
      wpboutik_color_labels: '#f4efc8',
      wpboutik_backgroundcolor_products: '#ffffff',
    }
  },
  wpboutik: {
    padding: 7,
    padding_image: 7,
    border_size: 1,
    border_radius: 6,
    image: '16/9',
    col: 4,
    format: 'column',
    sidebar_archive: 'hidden',
    opts: {
      //wpboutik_general_font_size: 14,
      wpboutik_single_product_title_font_size: 20,
      wpboutik_single_price_font_size: 18,
      wpboutik_cat_display: 'wpb-btn',
      wpboutik_single_have_excerpt: true,
      wpboutik_single_excerpt_size: 14,
      wpboutik_gallery_position: '-1',
      wpboutik_gallery_align: 'start',
      wpboutik_qty_align: 'calc(50% - .5rem)',
      wpboutik_slideshow_images: true,
      wpboutik_show_sidebar: 'hidden',
      wpboutik_number_related_products: 4,
      wpboutik_show_cart_sidebar: 'hidden',
      wpboutik_background_color_labels: '#dcfce7',
      wpboutik_backgroundcolor_button: '#3c54cc',
      wpboutik_hovercolor_button: '#3043a3',
      wpboutik_button_text_color: '#ffffff',
      wpboutik_title_product_color: '#000000',
      wpboutik_title_widget_color: '#000000',
      wpboutik_title_product_color_on_hover: '#3043a3',
      wpboutik_price_product_color: '#6b7280',
      wpboutik_bordercolor_products: '#e5e7eb',
      wpboutik_color_labels: '#166534',
      wpboutik_backgroundcolor_products: '#ffffff',
    }
  },
  colors: {
    wb: {
      light: '#dddddd',
      dark: '#2b3546',
      primary: '#5c5c5c',
      secondary: '#909090',
      info: '#6a6a6a',
      accent1: '#494949',
      accent2: '#6b6b6b',
      accent3: '#928e8b',
    },
    neutral: {
      light: '#f2e9e4',
      dark: '#22223b',
      primary: '#4a4e69',
      secondary: '#545d90',
      info: '#fdd192',
      accent1: '#433545',
      accent2: '#8c5b74',
      accent3: '#c9ada7',
    },
    modern: {
      light: '#f4e8e0',
      dark: '#161415',
      primary: '#5d1eb1',
      secondary: '#8f53ec',
      info: '#9a9bee',
      accent1: '#dbd6c9',
      accent2: '#917b79',
      accent3: '#c0c8a4',
    },
    sunlight: {
      light: '#e1e0dd',
      dark: '#1c0c0a',
      primary: '#ffae00',
      secondary: '#f9690b',
      info: '#4b9cf2',
      accent1: '#9d4192',
      accent2: '#6177b6',
      accent3: '#b1aaa5',
    }
  }
};

function build_theme_preview (theme_name) {
  let resp = [];
  for(let item in datas.colors[theme_name]) {
    resp.push([
      datas.colors[theme_name][item], item
    ])
  }
  return resp;
}

function build_color_options () {
  let options = [];
  for (let theme_name in datas.colors) {
    let label =  '<span style="display: inline-flex; gap: 1em; ">';
    for (let el of build_theme_preview(theme_name)) {
      label += '<span style="border: solid 1px #f2f2f2; width: 1.2em; height: 1.2em; background-color: '+el[0]+'" title="'+el[1]+'"></span>';
    }
    label += "</span>",
    options.push([
      label,
      theme_name
    ])
  }
  return options;
}

async function getColor (base = false) {
  try {
    const query = await fetch('https://api.huemint.com/color', {
      method: 'POST',
      headers: {
        "Content-Type": "application/json; charset=utf-8",
      },
      body: JSON.stringify({
        mode:"transformer",
        num_colors:9,
        num_results:5,
        adjacency: [
          0,
          "10",
          "80",
          "55",
          "35",
          "25",
          "45",
          "35",
          "15",
          "10",
          0,
          "90",
          "65",
          "45",
          "35",
          "65",
          "45",
          "25",
          "80",
          "90",
          0,
          "0",
          "0",
          "0",
          "0",
          "0",
          "0",
          "55",
          "65",
          "0",
          0,
          "15",
          "45",
          "65",
          "0",
          "0",
          "35",
          "45",
          "0",
          "15",
          0,
          "15",
          "0",
          "0",
          "0",
          "25",
          "35",
          "0",
          "45",
          "15",
          0,
          "0",
          "0",
          "0",
          "45",
          "65",
          "0",
          "65",
          "0",
          "0",
          0,
          "15",
          "45",
          "35",
          "45",
          "0",
          "0",
          "0",
          "0",
          "15",
          0,
          "15",
          "15",
          "25",
          "0",
          "0",
          "0",
          "0",
          "45",
          "15",
          0
        ],
        page:"bootstrap-plus",
        palette:["-", "#ffffff", "-", ((!!base) ? base : "-"), "-", "-", "-", "-", "-"],
        temperature:"1.3"
      })
    })
    const response = await query.json();
    return product_result(response.results);
  } catch (err) {
    return false;
  }
}

function product_result (results) {
  let items = [];
  for (let result of results) {
    let colors = {
      light: result.palette[0],
      dark: result.palette[2],
      primary: result.palette[3],
      secondary: result.palette[4],
      info: result.palette[5],
      accent1: result.palette[6],
      accent2: result.palette[7],
      accent3: result.palette[8],
    };
    let preview = `
      <span style="display: inline-flex; gap: 1em">
        <span title="light" 
              style="border: solid 1px #f2f2f2; width: 1.2em; height: 1.2em; background-color: ${colors.light}"></span>
        <span title="dark" 
              style="border: solid 1px #f2f2f2; width: 1.2em; height: 1.2em; background-color: ${colors.dark}"></span>
        <span title="primary" 
              style="border: solid 1px #f2f2f2; width: 1.2em; height: 1.2em; background-color: ${colors.primary}"></span>
        <span title="secondary" 
              style="border: solid 1px #f2f2f2; width: 1.2em; height: 1.2em; background-color: ${colors.secondary}"></span>
        <span title="info" 
              style="border: solid 1px #f2f2f2; width: 1.2em; height: 1.2em; background-color: ${colors.info}"></span>
        <span title="accent1" 
              style="border: solid 1px #f2f2f2; width: 1.2em; height: 1.2em; background-color: ${colors.accent1}"></span>
        <span title="accent2" 
              style="border: solid 1px #f2f2f2; width: 1.2em; height: 1.2em; background-color: ${colors.accent2}"></span>
        <span title="accent3" 
              style="border: solid 1px #f2f2f2; width: 1.2em; height: 1.2em; background-color: ${colors.accent3}"></span>
      </span>
    `;
    items.push({
      colors,
      preview
    })
  }
  return items;
}



(function ($) {
  function apply_color ($colors) {
    wp.customize.control('wpboutik_backgroundcolor_button').setting.set($colors.accent2);
    wp.customize.control('wpboutik_hovercolor_button').setting.set($colors.accent3);
    wp.customize.control('wpboutik_button_text_color').setting.set($colors.light);
    wp.customize.control('wpboutik_title_product_color').setting.set($colors.primary);
    wp.customize.control('wpboutik_title_widget_color').setting.set($colors.primary);
    wp.customize.control('wpboutik_title_product_color_on_hover').setting.set($colors.accent1);
    wp.customize.control('wpboutik_bordercolor_products').setting.set($colors.light);
    wp.customize.control('wpboutik_price_product_color').setting.set($colors.secondary);
    wp.customize.control('wpboutik_background_color_labels').setting.set($colors.info);
    wp.customize.control('wpboutik_color_labels').setting.set($colors.light);
    wp.customize.control('wpboutik_backgroundcolor_products').setting.set('#ffffff');
  }
  $(document).ready(function () {
    const options = build_color_options();
    const html = $('.color-choices');
    const custom_html = $('.custom-color-choices');
    for (let opt of options) {
      const label = $('<p style="margin: 4px 0px !important;cursor: pointer;border:solid 1px #dadada;padding: 5px;background-color: rgba(255, 255, 255, .2)">'+opt[0]+'</p>')
      label.attr('data-colors', JSON.stringify(datas.colors[opt[1]]))
      const content = $('<div style="display:flex;"></div>');

      label.click(function () {
        let $colors = JSON.parse($(this).attr('data-colors'));
        apply_color($colors)
      })
      content.append(label);
      html.append(content);
    }

    $('.ambiance-choice').on('click', function (e) {
      e.stopPropagation();
      e.preventDefault();
      let ambiance = $(this).attr('data-ambiance')
      let d = datas[ambiance];
      switch(ambiance) {
        case '':
        break;
        case '':
        break;
        case '':
        break;
      }
      wp.customize.control('wpboutik_image_padding').setting.set(d.padding_image);
      wp.customize.control('wpboutik_content_padding').setting.set(d.padding);
      wp.customize.control('wpboutik_borderweight_products').setting.set(d.border_size);
      wp.customize.control('wpboutik_borderradius_products').setting.set(d.border_radius);
      wp.customize.control('wpboutik_button_border_radius').setting.set(d.border_radius);
      wp.customize.control('wpboutik_archive_image_format').setting.set(d.image);
      wp.customize.control('wpboutik_archive_image_fill').setting.set('cover');
      wp.customize.control('wpboutik_show_archive_sidebar').setting.set(d.sidebar_archive);
      wp.customize.control('wpboutik_show_cart_sidebar').setting.set(d.cart_sidebar);
      wp.customize.control('wpboutik_archive_col_number_desktop').setting.set(d.col);
      wp.customize.control('wpboutik_product_direction').setting.set(d.format);
      if (d?.color_set) {
        apply_color(datas.colors[d.color_set]);
      }
      for (let opt in d.opts) {
        try {
          wp.customize.control(opt).setting.set(d.opts[opt]);
        } catch (err) {
          console.error(opt+' does not exist');
        }
      }
    })

    $('.color-theme-purpose').on('click', function (e) {
      $('.color-theme-purpose').html('Chargement...');
      custom_html.html('');
      e.stopPropagation();
      e.preventDefault();
      getColor().then(function (colors) {
        if (colors) {
          for (let opt of colors) {
            console.log(opt);
            const label = $('<p style="margin: 4px 0px !important;cursor: pointer;border:solid 1px #dadada;padding: 5px;background-color: rgba(255, 255, 255, .2)">'+opt.preview+'</p>')
            label.attr('data-colors', JSON.stringify(opt.colors))
            const content = $('<div style="display:flex;"></div>');
      
            label.click(function () {
              let $colors = JSON.parse($(this).attr('data-colors'));
              apply_color($colors);
            })
            content.append(label);
            custom_html.append(content);
          }
          
        }
        $('.color-theme-purpose').html('Nouvelles couleurs');
      })
    })
  })
})(jQuery)