import curatedContentTwig from './paragraph.curated-content.twig';
import curatedContentData from './paragraph.curated-content.yml';
import './paragraph.curated-content.js';

import { teaserHorizontal as projectTeaserHorizontal } from '@ui-node/project/teaser-horizontal/component/node.project.teaser-horizontal.stories.js';
import { teaserFeatured as storyTeaserFeatured } from '@ui-node/story/teaser-featured/component/node.story.teaser-featured.stories.js';

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

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

const ACCENT_BG_COLOR_OPTIONS = {
  '': '- None -',
  'accent_1': 'Accent 1',
  'accent_2': 'Accent 2',
  'accent_3': 'Accent 3',
  'accent_4': 'Accent 4',
}

/**
 * Storybook Definition.
 */
export default {
  title: 'Layout Components/Curated Content',
  argTypes: {
    color_scheme: {
      name: 'Color Scheme',
      ...colorSchemeControl,
    },
    border_radius: {
      name: 'Border Radius',
      options: Object.keys(BORDER_RADIUS_OPTIONS),
      control: {
        type: 'select',
        labels: BORDER_RADIUS_OPTIONS
      }
    },
    accent_bg_color: {
      name: 'Accent Color',
      options: Object.keys(ACCENT_BG_COLOR_OPTIONS),
      control: {
        type: 'select',
        labels: ACCENT_BG_COLOR_OPTIONS
      }
    },
  },
  args: {
    color_scheme: '',
    border_radius: '',
    accent_bg_color: '',
  }
};

export const projectTeaser = (args) => {
  // Create deep copy of data and merge args.
  let data = JSON.parse(JSON.stringify(curatedContentData ?? {}));
  data = Object.assign(data, args);

  let { color_scheme, border_radius, accent_bg_color } = data;

  data.paragraph = setPublishedStatus(data.paragraph_is_published);

  return curatedContentTwig({
    ...data,
    paragraph_field_color_scheme: color_scheme,
    paragraph_field_border_radius: border_radius,
    paragraph_field_accent_bg_color: accent_bg_color,
    paragraph_curated_node: projectTeaserHorizontal(),
  });
}
projectTeaser.args = curatedContentData;

export const storyTeaser = (args) => {
  // Create deep copy of data and merge args.
  let data = JSON.parse(JSON.stringify(curatedContentData ?? {}));
  data = Object.assign(data, args);

  let { color_scheme, border_radius, accent_bg_color } = data;

  data.paragraph = setPublishedStatus(data.paragraph_is_published);

  return curatedContentTwig({
    ...data,
    paragraph_field_color_scheme: color_scheme,
    paragraph_field_border_radius: border_radius,
    paragraph_field_accent_bg_color: accent_bg_color,
    paragraph_curated_node: storyTeaserFeatured(),
  });
}
projectTeaser.args = curatedContentData;
