import accordionTwig from './accordion/_accordion.twig';
import oneColumTwig from './one-column/_one-column.twig';
import twoColumTwig from './two-column/_two-column.twig';
import threeColumTwig from './three-column/_three-column.twig';
import fourColumTwig from './four-column/_four-column.twig';

import './layouts.js';

import { colorSchemeControl } from '.storybook/utils';

import { placeholder } from '@ui-paragraph/placeholder/component/paragraph.placeholder.stories.js';
import { htmlContent } from '@ui-paragraph/html-content/component/paragraph.html-content.stories.js';
import { ctaLink } from '@ui-paragraph/cta-link/component/paragraph.cta-link.stories.js';

import drupalAttribute from 'drupal-attribute';

/**
 * Storybook Definition.
 */
export default { title: 'Layouts/Layouts' };

// **************************************************
// ONE COLUMN LAYOUT

const ONE_COLUMN_WIDTH_OPTIONS = {
  '': '- Normal -',
  'layout--edge-to-edge': 'Edge to Edge',
  'layout--edge-to-edge-safe': 'Edge to Edge (Safe)',
  'layout--indent-1': 'Indent (1 Column)',
  'layout--indent-2': 'Indent (2 Columns)',
  'layout--outdent-1': 'Outdent (1 Column)',
  'layout--outdent-2': 'Outdent (2 Columns)',
};

const ONE_COLUMN_BORDER_RADIUS_OPTIONS = {
  '': '- None -',
  'layout--border-radius-tl': 'Top Left',
  'layout--border-radius-tr': 'Top Right',
  'layout--border-radius-bl': 'Bottom Left',
  'layout--border-radius-br': 'Bottom Right',
  'layout--border-radius-tlbr': 'Top Left / Bottom Right',
  'layout--border-radius-trbl': 'Top Right / Bottom Left',
}

const ONE_COLUMN_ACCENT_BG_COLOR_OPTIONS = {
  '': '- None -',
  'layout--accent-bg-color-1': 'Accent 1',
  'layout--accent-bg-color-2': 'Accent 2',
  'layout--accent-bg-color-3': 'Accent 3',
  'layout--accent-bg-color-4': 'Accent 4',
}

export const oneColumn = (args) => {
  let data = Object.assign({}, args);
  let { color_scheme, column_width, border_radius, accent_bg_color } = data;
  let paragraphAttributes = Object.assign({});

  paragraphAttributes['class'] = [];

  if (color_scheme) {
    paragraphAttributes['data-color-scheme'] = color_scheme;
  }

  if (column_width) {
    paragraphAttributes['class'].push(column_width);
  }

  if (border_radius) {
    paragraphAttributes['class'].push(border_radius);
  }

  if (accent_bg_color) {
    paragraphAttributes['class'].push(accent_bg_color);
  }

  return oneColumTwig({
    paragraph_layout_region_first: [
      '<h1>Heading</h1>',
      placeholder(),
      htmlContent(),
      ctaLink({
        paragraph_field_link: 'Primary CTA',
        paragraph_field_cta_link_style: 'primary',
      }),
      ctaLink({
        paragraph_field_link: 'Secondary CTA',
        paragraph_field_cta_link_style: 'secondary'
      }),
      ctaLink({
        paragraph_field_link: 'CTA with Arrow',
        paragraph_field_cta_link_style: 'with-arrow'
      }),
    ],
    attributes: new drupalAttribute(Object.entries(paragraphAttributes)),
  });
};
oneColumn.argTypes = {
  color_scheme: {
    name: 'Color Scheme',
    ...colorSchemeControl,
  },
  column_width: {
    name: 'Width',
    options: Object.keys(ONE_COLUMN_WIDTH_OPTIONS),
    control: {
      type: 'select',
      labels: ONE_COLUMN_WIDTH_OPTIONS
    }
  },
  border_radius: {
    name: 'Border Radius',
    options: Object.keys(ONE_COLUMN_BORDER_RADIUS_OPTIONS),
    control: {
      type: 'select',
      labels: ONE_COLUMN_BORDER_RADIUS_OPTIONS
    }
  },
  accent_bg_color: {
    name: 'Accent BG Color',
    options: Object.keys(ONE_COLUMN_ACCENT_BG_COLOR_OPTIONS),
    control: {
      type: 'select',
      labels: ONE_COLUMN_ACCENT_BG_COLOR_OPTIONS
    }
  },
};

// **************************************************
// TWO COLUMN LAYOUT

const LAYOUT_TWO_COLUMN_RATIO_OPTIONS = {
  'layout--50-50': '50%/50%',
  'layout--60-40': '60%/40%',
  'layout--40-60': '40%/60%',
  'layout--70-30': '70%/30%',
  'layout--30-70': '30%/70%',
  'layout--75-25': '75%/25%',
  'layout--25-75': '25%/75%',
};

export const twoColumn = (args) => {
  let column_ratio = args.column_ratio ?? 'layout--50-50';
  let paragraphClasses = [column_ratio];
  let paragraphAttributes = Object.assign({});

  paragraphAttributes.class = paragraphClasses;

  return twoColumTwig({
    paragraph_layout_region_first: placeholder(),
    paragraph_layout_region_second: placeholder(),
    attributes: new drupalAttribute(Object.entries(paragraphAttributes)),
  });
};
twoColumn.argTypes = {
  column_ratio: {
    name: 'Column Ratio',
    options: Object.keys(LAYOUT_TWO_COLUMN_RATIO_OPTIONS),
    control: {
      type: 'select',
      labels: LAYOUT_TWO_COLUMN_RATIO_OPTIONS
    }
  }
};
twoColumn.args = {
  column_ratio: 'layout--50-50',
};

// **************************************************
// THREE COLUMN LAYOUT

const LAYOUT_THREE_COLUMN_RATIO_OPTIONS = {
  'layout--33-33-33': '33%/33%/33%',
  'layout--25-50-25': '25%/50%/25%',
  'layout--50-25-25': '50%/25%/25%',
  'layout--25-25-50': '25%/25%/50%',
};

export const threeColumn = (args) => {
  let column_ratio = args.column_ratio ?? 'layout--33-33-33';
  let paragraphClasses = [column_ratio];
  let paragraphAttributes = Object.assign({});

  paragraphAttributes.class = paragraphClasses;

  return threeColumTwig({
    paragraph_layout_region_first: placeholder(),
    paragraph_layout_region_second: placeholder(),
    paragraph_layout_region_third: placeholder(),
    attributes: new drupalAttribute(Object.entries(paragraphAttributes)),
  });
};
threeColumn.argTypes = {
  column_ratio: {
    name: 'Column Ratio',
    options: Object.keys(LAYOUT_THREE_COLUMN_RATIO_OPTIONS),
    control: {
      type: 'select',
      labels: LAYOUT_THREE_COLUMN_RATIO_OPTIONS
    }
  }
};
threeColumn.args = {
  column_ratio: 'layout--33-33-33',
};

// **************************************************
// FOUR COLUMN LAYOUT

export const fourColumn = () => {
  let paragraphAttributes = Object.assign({});

  return fourColumTwig({
    paragraph_layout_region_first: placeholder(),
    paragraph_layout_region_second: placeholder(),
    paragraph_layout_region_third: placeholder(),
    paragraph_layout_region_fourth: placeholder(),
    attributes: new drupalAttribute(Object.entries(paragraphAttributes)),
  });
};
fourColumn.argTypes = {
};
fourColumn.args = {
};

// **************************************************
// ACCORDION LAYOUT

export const accordionColumn = () => {
  let paragraphAttributes = Object.assign({});

  return accordionTwig({
    paragraph_layout_header: 'The Word | is Awesome',
    paragraph_layout_region_first: placeholder(),
    attributes: new drupalAttribute(Object.entries(paragraphAttributes)),
  });
};
accordionColumn.argTypes = {
};
accordionColumn.args = {
};
