Untitled

mail@pastecode.io avatarunknown
plain_text
a month ago
41 kB
1
Indexable
Never
function cssStylesPickerEditorDialogController($scope, formHelper) {
  const vm = this;
  vm.brandName = 'tt';
  vm.defaultValues = {
    tt: {
      settings: {
        mobile: {
          container: {
            spacing: {
              padding: {
                t: '8px',
                b: '24px',
                l: '16px',
                r: '8px',
              },
              margin: {
                all: 'None',
              },
            },
            background: {
              color: {
                from: '#ffe599',
                fromTransparent: true,
                to: '#f9cb9c',
                toTransparent: true,
                direction: 'To top',
              },
            },
            border: {
              radius: {
                tl: 'XL',
                tr: 'M',
                bl: 'XL',
                br: 'XL',
              },
              width: 'width 1px',
              color: '#fff2cc',
              style: 'Dotted',
            },
            effects: {
              shadow: 'M',
              color: '#fce5cd',
              opacity: '25%',
            },
            sizing: {
              width: 'Screen',
              height: '16px',
            },
          },
          text: {
            typography: {
              family: 'Serif',
              size: 'XL',
              smoothing: true,
              italic: true,
              weight: '400 (normal)',
              spacing: '0.05em (wider)',
              lineHeight: '1.25rem/20px',
              align: 'Justify',
              color: '#38761d',
              decoration: 'Overline',
              decorationColor: '#b6d7a8',
              decorationStyle: 'Dashed',
              thickness: '1px',
              underlineOffset: '1px',
              textTransform: 2,
            },
            spacing: {
              padding: {
                t: '16px',
                b: '16px',
                l: 'None',
                r: '32px',
              },
              margin: {
                all: '16px',
              },
            },
            background: {
              color: 'Transparent',
            },
            effects: {
              opacity: '10%',
            },
            sizing: {
              width: '1/12',
              height: '4px',
            },
          },
          image: {
            spacing: {
              padding: {
                t: '24px',
                b: '16px',
                l: '24px',
                r: 'None',
              },
              margin: {
                all: 'None',
              },
            },
            background: {
              color: 'Transparent',
            },
            border: {
              radius: {
                tl: 'M',
                tr: 'L',
                bl: 'S',
                br: 'L',
              },
              width: 'width 2px',
              color: '#6fa8dc',
              style: 'Double',
            },
            effects: {
              opacity: '20%',
            },
            sizing: {
              width: '1/12',
              height: '16px',
            },
          },
          icon: {
            spacing: {
              padding: {
                t: '24px',
                b: '8px',
                l: '16px',
                r: '4px',
              },
              margin: {
                all: '16px',
              },
            },
            background: {
              color: 'Transparent',
            },
            effects: {
              opacity: '20%',
            },
            sizing: {
              width: '1/12',
              height: '4px',
            },
            svg: {
              fill: {
                customFill: 'Inherit',
              },
              stroke: 'width 2px',
              width: 2,
            },
          },
        },
        tablet: {
          container: {
            spacing: {
              padding: {
                t: '8px',
                b: '24px',
                l: '16px',
                r: '8px',
              },
              margin: {
                all: 'None',
              },
            },
            background: {
              color: {
                from: '#ffe599',
                fromTransparent: true,
                to: '#f9cb9c',
                toTransparent: true,
                direction: 'To top',
              },
            },
            border: {
              radius: {
                tl: 'XL',
                tr: 'M',
                bl: 'XL',
                br: 'XL',
              },
              width: 'width 1px',
              color: '#fff2cc',
              style: 'Dotted',
            },
            effects: {
              shadow: 'M',
              color: '#fce5cd',
              opacity: '25%',
            },
            sizing: {
              width: 'Screen',
              height: '16px',
            },
          },
          text: {
            typography: {
              family: 'Serif',
              size: 'XL',
              smoothing: true,
              italic: true,
              weight: '400 (normal)',
              spacing: '0.05em (wider)',
              lineHeight: '1.25rem/20px',
              align: 'Justify',
              color: '#38761d',
              decoration: 'Overline',
              decorationColor: '#b6d7a8',
              decorationStyle: 'Dashed',
              thickness: '1px',
              underlineOffset: '1px',
              textTransform: 2,
            },
            spacing: {
              padding: {
                t: '16px',
                b: '16px',
                l: 'None',
                r: '32px',
              },
              margin: {
                all: '16px',
              },
            },
            background: {
              color: 'Transparent',
            },
            effects: {
              opacity: '10%',
            },
            sizing: {
              width: '1/12',
              height: '4px',
            },
          },
          image: {
            spacing: {
              padding: {
                t: '24px',
                b: '16px',
                l: '24px',
                r: 'None',
              },
              margin: {
                all: 'None',
              },
            },
            background: {
              color: 'Transparent',
            },
            border: {
              radius: {
                tl: 'M',
                tr: 'L',
                bl: 'S',
                br: 'L',
              },
              width: 'width 2px',
              color: '#6fa8dc',
              style: 'Double',
            },
            effects: {
              opacity: '20%',
            },
            sizing: {
              width: '1/12',
              height: '16px',
            },
          },
          icon: {
            spacing: {
              padding: {
                t: '24px',
                b: '8px',
                l: '16px',
                r: '4px',
              },
              margin: {
                all: '16px',
              },
            },
            background: {
              color: 'Transparent',
            },
            effects: {
              opacity: '20%',
            },
            sizing: {
              width: '1/12',
              height: '4px',
            },
            svg: {
              fill: {
                customFill: 'Inherit',
              },
              stroke: 'width 2px',
              width: 2,
            },
          },
        },
      },
      alias: '',
      label: '',
    },
  };
  // Constants -----------------------------------------------
  const paddingValues = [
    'None',
    '4px',
    '8px',
    '16px',
    '24px',
    '32px',
    '40px',
    '48px',
    '64px',
    '80px',
    '96px',
  ];
  const marginValues = [
    'None',
    '4px',
    '8px',
    '16px',
    '24px',
    '32px',
    '40px',
    '48px',
    '64px',
    '80px',
    '96px',
  ];
  const radiusValues = ['None', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL', 'Full'];
  const borderStyleValues = ['Solid', 'Double', 'Dotted', 'Dashed', 'Wavy'];
  const widthSizeValues = [
    'Auto',
    'Full',
    'Screen',
    '1/12',
    '2/12',
    '3/12',
    '4/12',
    '5/12',
    '6/12',
    '7/12',
    '8/12',
    '9/12',
    '10/12',
    '11/12',
    '12/12',
    '4px',
    '8px',
    '16px',
    '24px',
    '32px',
    '40px',
    '48px',
    '64px',
    '80px',
    '96px',
    'None',
  ];
  const heightSizeValues = [
    'Auto',
    '4px',
    '8px',
    '16px',
    '24px',
    '32px',
    '40px',
    '48px',
    '64px',
    '80px',
    '96px',
    '128px',
    '256px',
    'None',
  ];
  const borderWidthValues = [
    'width 0px',
    'width 2px',
    'width 4px',
    'width 8px',
    'width 1px',
    'left right 0px',
    'left right 2px',
    'left right 4px',
    'left right 8px',
    'left right 1px',
    'top bottom 0px',
    'top bottom 2px',
    'top bottom 4px',
    'top bottom 8px',
    'top bottom 1px',
    'inline start 0px',
    'inline start 2px',
    'inline start 4px',
    'inline start 8px',
    'inline start 1px',
    'inline end 0px',
    'inline end 2px',
    'inline end 4px',
    'inline end 8px',
    'inline end 1px',
    'top 0px',
    'top 2px',
    'top 4px',
    'top 8px',
    'top 1px',
    'right 0px',
    'right 2px',
    'right 4px',
    'right 8px',
    'right 1px',
    'bottom 0px',
    'bottom 2px',
    'bottom 4px',
    'bottom 8px',
    'bottom 1px',
    'left 0px',
    'left 2px',
    'left 4px',
    'left 8px',
    'left 1px',
  ];
  const gradientDirectionValues = [
    'To left',
    'To right',
    'To bottom',
    'To top',
  ];
  const fontSizeValues = [
    'XS',
    'S',
    'M',
    'L',
    'XL',
    'XXL',
    '3XL',
    '4XL',
    '5XL',
    '6XL',
    '7XL',
    '8XL',
    '9XL',
  ];
  const fontWeightValues = [
    '100 (thin)',
    '200 (extralight)',
    '300 (light)',
    '400 (normal)',
    '500 (medium)',
    '600 (semibold)',
    '700 (bold)',
    '800 (extrabold)',
    '900 (black)',
  ];
  const letterSpacingValues = [
    'Auto',
    '-0.05em (tighter)',
    '-0.025em (tight)',
    '0.025em (wide)',
    '0.05em (wider)',
    '0.1em (widest)',
  ];
  const lineHeightValues = [
    'Auto',
    '.75rem/12px',
    '1rem/16px',
    '1.25rem/20px',
    '1.5rem/24px',
    '1.75rem/28px',
    '2rem/32px',
    '2.25rem/36px',
    '2.5rem/ 40px',
    '1.25 (tight)',
    '1.375 (snug)',
    '1.5 (normal)',
    '1.625 (relaxed)',
    '2 (loose)',
  ];
  const textAlignValues = [
    'Left',
    'Center',
    'Right',
    'Justify',
    'Start',
    'End',
  ];
  const textDecorationValues = ['None', 'Underine', 'Overline', 'Line-through'];
  const textDecorationStyleValues = [
    'Solid',
    'Double',
    'Dotted',
    'Dashed',
    'Wavy',
  ];
  const textDecorationThicknessValues = [
    'Auto',
    'From font',
    '0px',
    '1px',
    '2px',
    '4px',
    '8px',
  ];
  const textDecorationOffsetValues = textDecorationThicknessValues;
  const textTransformValues = [0, 1, 2];
  const opacityValues = [
    '0',
    '5%',
    '10%',
    '20%',
    '25%',
    '30%',
    '40%',
    '50%',
    '60%',
    '70%',
    '75%',
    '80%',
    '85%',
    '90%',
    '95%',
    '100%',
  ];
  const fontFamilyValues = ['Sans', 'Serif', 'Mono'];
  const shadowValues = ['None', 'Auto', 'S', 'M', 'L', 'XL', 'XXL', 'Inner'];
  const customFillColor = ['None', 'Inherit', 'Current', 'Transparent'];

  const containerDefaults =
    vm.defaultValues[vm.brandName].settings.mobile.container;
  const textDefaults = vm.defaultValues[vm.brandName].settings.mobile.text;
  const imageDefaults = vm.defaultValues[vm.brandName].settings.mobile.image;
  const iconDefaults = vm.defaultValues[vm.brandName].settings.mobile.icon;

  function getSpacingSettings(section, settings, property, label) {
    return {
      name: `Set custom ${property}`,
      type: 'toggle',
      value: !section.all,
      show: true,
      property,
      variants: [
        [
          {
            name: `${label} All`,
            property: 'all',
            type: 'dropdown',
            value: section.all ?? '',
            items: settings,
          },
        ],
        [
          {
            name: `${label} Top`,
            property: 't',
            type: 'dropdown',
            value: section.t ?? '',
            items: settings,
          },
          {
            name: `${label} Bottom`,
            property: 'b',
            type: 'dropdown',
            value: section.b ?? '',
            items: settings,
          },
          {
            name: `${label} Left`,
            property: 'l',
            type: 'dropdown',
            value: section.l ?? '',
            items: settings,
          },
          {
            name: `${label} Right`,
            property: 'r',
            type: 'dropdown',
            value: section.r ?? '',
            items: settings,
          },
        ],
      ],
    };
  }
  function spacingSettings(sectionDefaults) {
    return {
      title: 'Spacing',
      property: 'spacing',
      settings: [
        getSpacingSettings(
          sectionDefaults.spacing.padding,
          paddingValues,
          'padding',
          'Padding'
        ),
        getSpacingSettings(
          sectionDefaults.spacing.margin,
          marginValues,
          'margin',
          'Margin'
        ),
      ],
    };
  }
  function sizingSettings(sectionDefaults) {
    return {
      title: 'Sizing',
      property: 'sizing',
      settings: [
        {
          name: 'Width',
          property: 'width',
          type: 'dropdown',
          value: sectionDefaults.sizing.width,
          items: widthSizeValues,
        },
        {
          name: 'Height',
          property: 'height',
          type: 'dropdown',
          value: sectionDefaults.sizing.height,
          items: heightSizeValues,
        },
      ],
    };
  }

  function borderRadiusSettings(sectionDefaults) {
    return {
      name: 'Set custom radius',
      property: 'radius',
      type: 'toggle',
      value: !sectionDefaults.border.radius.all,
      show: true,
      variants: [
        [
          {
            name: 'Radius All',
            property: 'all',
            type: 'dropdown',
            value: sectionDefaults.border.radius.all,
            items: radiusValues,
          },
        ],
        [
          {
            name: 'Radius Top Left',
            property: 'tl',
            type: 'dropdown',
            value: sectionDefaults.border.radius.tl,
            items: radiusValues,
          },
          {
            name: 'Radius Top Right',
            property: 'tr',
            type: 'dropdown',
            value: sectionDefaults.border.radius.tr,
            items: radiusValues,
          },
          {
            name: 'Radius Bottom Left',
            property: 'bl',
            type: 'dropdown',
            value: sectionDefaults.border.radius.bl,
            items: radiusValues,
          },
          {
            name: 'Radius Bottom Right',
            property: 'br',
            type: 'dropdown',
            value: sectionDefaults.border.radius.br,
            items: radiusValues,
          },
        ],
      ],
    };
  }

  const containerSettings = {
    title: 'Container',
    property: 'container',
    subSections: [
      spacingSettings(containerDefaults),
      {
        title: 'Background',
        property: 'background',
        isOnlyMobile: true,
        settings: [
          {
            name: 'Set gradient',
            property: 'color',
            type: 'toggle',
            value: !containerDefaults.background.color.color,
            show: true,
            variants: [
              [
                {
                  name: 'Color',
                  property: 'color',
                  type: 'colorPicker',
                  value: containerDefaults.background.color.color,
                },
                {
                  name: 'Transparent',
                  property: 'transparent',
                  type: 'toggle',
                  value: containerDefaults.background.color.transparent,
                  show: true,
                },
              ],
              [
                {
                  name: 'From',
                  property: 'from',
                  type: 'colorPicker',
                  value: containerDefaults.background.color.from,
                },
                {
                  name: 'Set From color transparent',
                  property: 'fromTransparent',
                  type: 'toggle',
                  value: containerDefaults.background.color.fromTransparent,
                  show: true,
                },

                {
                  name: 'To',
                  property: 'to',
                  type: 'colorPicker',
                  value: containerDefaults.background.color.to,
                },
                {
                  name: 'Set To color transparent',
                  property: 'toTransparent',
                  type: 'toggle',
                  value: containerDefaults.background.color.toTransparent,
                  show: true,
                },
                {
                  name: 'Direction',
                  property: 'direction',
                  type: 'dropdown',
                  value: containerDefaults.background.color.direction,
                  items: gradientDirectionValues,
                },
              ],
            ],
          },
        ],
      },
      {
        title: 'Border',
        property: 'border',
        settings: [
          borderRadiusSettings(containerDefaults),
          {
            name: 'Width',
            isOnlyMobile: true,
            property: 'width',
            type: 'dropdown',
            value: containerDefaults.border.width,
            items: borderWidthValues,
          },
          {
            name: 'Color',
            isOnlyMobile: true,
            property: 'color',
            type: 'colorPicker',
            value: containerDefaults.border.color,
          },
          {
            name: 'Style',
            isOnlyMobile: true,
            property: 'style',
            type: 'dropdown',
            value: containerDefaults.border.style,
            items: borderStyleValues,
          },
        ],
      },
      {
        title: 'Effects',
        property: 'effects',
        isOnlyMobile: true,
        settings: [
          {
            name: 'Shadow',
            property: 'shadow',
            type: 'dropdown',
            value: containerDefaults.effects.shadow,
            items: shadowValues,
          },
          {
            name: 'Color',
            property: 'color',
            type: 'colorPicker',
            value: containerDefaults.effects.color,
          },

          {
            name: 'Opacity',
            property: 'opacity',
            type: 'dropdown',
            value: containerDefaults.effects.opacity,
            items: opacityValues,
          },
        ],
      },
      sizingSettings(containerDefaults),
    ],
  };
  const textSettings = {
    title: 'Text',
    property: 'text',
    subSections: [
      {
        title: 'Typography',
        property: 'typography',
        settings: [
          {
            name: 'Font family',
            property: 'family',
            isOnlyMobile: true,
            type: 'dropdown',
            value: textDefaults.typography.family,
            items: fontFamilyValues,
          },
          {
            name: 'Font size',
            property: 'size',
            type: 'dropdown',
            value: textDefaults.typography.size,
            items: fontSizeValues,
          },
          {
            name: 'Set antialiased smoothing',
            property: 'smoothing',
            isOnlyMobile: true,
            type: 'toggle',
            show: 'true',
            value: textDefaults.typography.smoothing,
            show: true,
          },
          {
            name: 'Set italic',
            property: 'italic',
            isOnlyMobile: true,
            type: 'toggle',
            value: textDefaults.typography.italic,
            show: true,
          },
          {
            name: 'Weight',
            property: 'weight',
            type: 'dropdown',
            value: textDefaults.typography.weight,
            items: fontWeightValues,
          },
          {
            name: 'Letter Spacing',
            property: 'spacing',
            isOnlyMobile: true,
            type: 'dropdown',
            value: textDefaults.typography.spacing,
            items: letterSpacingValues,
          },
          {
            name: 'Line height',
            property: 'lineHeight',
            type: 'dropdown',
            value: textDefaults.typography.lineHeight,
            items: lineHeightValues,
          },
          {
            name: 'Text align',
            property: 'align',
            type: 'dropdown',
            value: textDefaults.typography.align,
            items: textAlignValues,
          },
          {
            name: 'Color',
            property: 'color',
            isOnlyMobile: true,
            type: 'colorPicker',
            value: textDefaults.typography.color,
          },
          {
            name: 'Decoration',
            property: 'decoration',
            isOnlyMobile: true,
            type: 'dropdown',
            value: textDefaults.typography.decoration,
            items: textDecorationValues,
          },
          {
            name: 'Decoration color',
            property: 'decorationColor',
            isOnlyMobile: true,
            type: 'colorPicker',
            value: textDefaults.typography.decorationColor,
          },
          {
            name: 'Decoration Style',
            property: 'decorationStyle',
            isOnlyMobile: true,
            type: 'dropdown',
            value: textDefaults.typography.decorationStyle,
            items: textDecorationStyleValues,
          },
          {
            name: 'Text Decoration thickness',
            property: 'thickness',
            isOnlyMobile: true,
            type: 'dropdown',
            value: textDefaults.typography.thickness,
            items: textDecorationThicknessValues,
          },
          {
            name: 'Text underline offset',
            property: 'underlineOffset',
            type: 'dropdown',
            value: textDefaults.typography.underlineOffset,
            items: textDecorationOffsetValues,
          },
          {
            name: 'Text transform',
            property: 'textTransform',
            isOnlyMobile: true,
            type: 'dropdown',
            value: textDefaults.typography.textTransform,
            items: textTransformValues,
          },
        ],
      },
      spacingSettings(textDefaults),

      {
        title: 'Background',
        property: 'background',
        isOnlyMobile: true,
        settings: [
          {
            name: 'Color',
            property: 'color',
            type: 'dropdown',
            value: textDefaults.background.color,
            items: ['Current', 'Transparent'],
          },
        ],
      },
      {
        title: 'Effects',
        property: 'effects',
        isOnlyMobile: true,
        settings: [
          {
            name: 'Opacity',
            property: 'opacity',
            type: 'dropdown',
            value: textDefaults.effects.opacity,
            items: opacityValues,
          },
        ],
      },
      sizingSettings(textDefaults),
    ],
  };
  const imageSettings = {
    title: 'Image',
    property: 'image',
    subSections: [
      spacingSettings(imageDefaults),
      {
        title: 'Background',
        property: 'background',
        isOnlyMobile: true,
        settings: [
          {
            name: 'Color',
            property: 'color',
            type: 'dropdown',
            value: imageDefaults.background.color,
            items: ['Current', 'Transparent'],
          },
        ],
      },
      {
        title: 'Border',
        property: 'border',
        settings: [
          borderRadiusSettings(imageDefaults),
          {
            name: 'Width',
            property: 'width',
            isOnlyMobile: true,
            type: 'dropdown',
            value: imageDefaults.border.width,
            items: borderWidthValues,
          },
          {
            name: 'Color',
            property: 'color',
            isOnlyMobile: true,
            type: 'colorPicker',
            value: imageDefaults.border.color,
          },
          {
            name: 'Style',
            property: 'style',
            isOnlyMobile: true,
            type: 'dropdown',
            value: imageDefaults.border.style,
            items: borderStyleValues,
          },
        ],
      },
      {
        title: 'Effects',
        property: 'effects',
        isOnlyMobile: true,
        settings: [
          {
            name: 'Opacity',
            property: 'opacity',
            type: 'dropdown',
            value: imageDefaults.effects.opacity,
            items: opacityValues,
          },
        ],
      },
      sizingSettings(imageDefaults),
    ],
  };
  const iconSettings = {
    title: 'Icon',
    property: 'icon',
    subSections: [
      spacingSettings(iconDefaults),

      {
        title: 'Background',
        property: 'background',
        isOnlyMobile: true,
        settings: [
          {
            name: 'Color',
            property: 'color',
            type: 'dropdown',
            value: iconDefaults.background.color,
            items: ['Current', 'Transparent'],
          },
        ],
      },
      {
        title: 'Effects',
        property: 'effects',
        isOnlyMobile: true,
        settings: [
          {
            name: 'Opacity',
            property: 'opacity',
            type: 'dropdown',
            value: iconDefaults.effects.opacity,
            items: opacityValues,
          },
        ],
      },
      sizingSettings(iconDefaults),
      {
        title: 'SVG',
        property: 'svg',
        isOnlyMobile: true,
        settings: [
          {
            name: 'Set custom fill',
            property: 'fill',
            type: 'toggle',
            value: !!iconDefaults.svg.fill.customFill,
            show: true,
            variants: [
              [
                {
                  name: 'Fill',
                  property: 'color',
                  type: 'colorPicker',
                  value: iconDefaults.svg.fill.color,
                },
              ],
              [
                {
                  name: 'Fill',
                  property: 'customFill',
                  type: 'dropdown',
                  value: iconDefaults.svg.fill.customFill,
                  items: customFillColor,
                },
              ],
            ],
          },
          {
            name: 'Stroke',
            property: 'stroke',
            type: 'dropdown',
            value: iconDefaults.svg.stroke,
            items: borderWidthValues,
          },
          {
            name: 'Width',
            property: 'width',
            type: 'dropdown',
            value: iconDefaults.svg.width,
            items: [0, 1, 2],
          },
        ],
      },
    ],
  };
  const basicSettings = [
    {
      type: 'dropdown-add',
      id: 'add-subsection',
      value: '',
      // show: vm.context.alias,
      show: true,
      items: [containerSettings, textSettings, imageSettings, iconSettings],
    },
    {
      name: 'Show preview',
      type: 'toggle',
      id: 'preview',
      show: true,
      // show: vm.context.alias,
      value: false,
    },
    {
      name: 'Show defaults',
      type: 'toggle',
      id: 'defaults',
      value: false,
      show: true,
      // show: vm.context.alias,
      showTooltip: false,
      tooltipMessage:
        "Show default values for sections. If you don't choose any styles, those styles will be applied.",
    },
  ];

  // Constants End -----------------------------------------------
  vm.tabs = [
    {
      label: 'Mobile',
      settings: basicSettings,
      selector: 'mobile',
      show: true,
      isRemovable: false,
      styledSectionsSettings: [],
    },
    {
      label: 'Tablet',
      settings: basicSettings,
      selector: 'tablet',
      // show: vm.defaultValues[vm.brandName].settings.hasOwnProperty('tablet'),
      show: false,
      isRemovable: true,
      styledSectionsSettings: [],
    },
    {
      label: 'Desktop',
      settings: basicSettings,
      selector: 'desktop',
      // show: vm.defaultValues[vm.brandName].settings.hasOwnProperty('desktop'),
      show: false,
      isRemovable: true,
      styledSectionsSettings: [],
    },
  ];

  console.log(vm.tabs);

  vm.addSubsection = addSubsection;
  vm.saveButtonState = 'init';
  vm.close = close;
  vm.submit = submit;
  vm.init = init;

  vm.availableProperties = [];
  vm.context = {};
  vm.generateRequestData = generateRequestData;
  vm.requestData = {};
  function isObject(item) {
    return item && typeof item === 'object' && !Array.isArray(item);
  }

  /**
   * Deep merge two objects.
   * @param target
   * @param ...sources
   */
  function mergeDeep(target, ...sources) {
    if (!sources.length) return target;
    const source = sources.shift();

    if (isObject(target) && isObject(source)) {
      for (const key in source) {
        if (isObject(source[key])) {
          if (!target[key]) Object.assign(target, { [key]: {} });
          mergeDeep(target[key], source[key]);
        } else {
          Object.assign(target, { [key]: source[key] });
        }
      }
    }

    return mergeDeep(target, ...sources);
  }

  function submit(model) {
    vm.requestData = generateRequestData();

    console.log(vm.requestData);

    if (!formHelper.submitForm({ scope: $scope })) {
      return;
    }

    $scope.model.submit(vm.requestData);
  }

  function close() {
    if ($scope.model && $scope.model.close) {
      $scope.model.close();
    }
  }

  function init() {
    if ($scope.model.data.availableProperties) {
      vm.availableProperties = $scope.model.data.availableProperties;
    }

    if ($scope.model.data.context) {
      vm.context = $scope.model.data.context; // + merge defaults
      vm.defaultValues[vm.brandName] = mergeDeep(
        vm.defaultValues[vm.brandName],
        vm.context
      );
    }
  }

  vm.init();
  vm.stylingProperties = {
    alias: {
      name: 'Section',
      type: 'dropdown',
      id: 'section',
      value: vm.defaultValues[vm.brandName].label ?? '',
      alias: vm.defaultValues[vm.brandName].alias ?? '',
      items: vm.availableProperties,
    },
  };
  // Additional Styling start -------------------------------------------------------
  vm.tabselector = 'mobile';
  vm.handleDropDownOpen = handleDropDownOpen;
  vm.handleDropDownClose = handleDropDownClose;
  vm.selectDropDownValue = selectDropDownValue;
  vm.selectSection = selectSection;
  vm.setShowPickersInSection = setShowPickersInSection;
  vm.getDropDownValue = getDropDownValue;
  vm.getSectionDropDownValue = getSectionDropDownValue;
  vm.mouseOver = mouseOver;
  vm.mouseLeave = mouseLeave;
  vm.toggle = toggle;
  vm.toggleTabShow = toggleTabShow;
  vm.getButtonLabel = getButtonLabel;
  vm.selectTab = selectTab;
  vm.addActiveClass = addActiveClass;
  vm.changeColor = changeColor;

  function handleDropDownOpen(currentDropDown) {
    currentDropDown.dropdownOpen = true;
  }

  function handleDropDownClose(currentDropDown) {
    currentDropDown.dropdownOpen = false;
  }

  function selectDropDownValue(item, currentSettings, index) {
    const currentDropDown = currentSettings[index];
    currentDropDown.value = item;
    vm.handleDropDownClose(currentDropDown);
  }

  function changeColor(color, currentSetting) {
    const hexColor = color.toHexString();
    currentSetting.value = hexColor;
  }
  function clearEmpties(o) {
    for (let k in o) {
      if (!o[k] || typeof o[k] !== 'object') {
        continue;
      }
      clearEmpties(o[k]);
      if (Object.keys(o[k]).length === 0) {
        delete o[k];
      }
    }
    return o;
  }
  function getDifferences(obj1, obj2) {
    if (!obj2 || Object.prototype.toString.call(obj2) !== '[object Object]') {
      return obj1;
    }
    let diffs = {};
    let key;

    function arraysMatch(arr1, arr2) {
      // Check if the arrays are the same length
      if (arr1.length !== arr2.length) return false;

      // Check if all items exist and are in the same order
      for (let i = 0; i < arr1.length; i++) {
        if (arr1[i] !== arr2[i]) return false;
      }

      // Otherwise, return true
      return true;
    }

    function compare(item1, item2, key) {
      const type1 = Object.prototype.toString.call(item1);
      const type2 = Object.prototype.toString.call(item2);

      // If type2 is undefined it has been removed
      if (type2 === '[object Undefined]') {
        return;
      }

      if (type1 !== type2) {
        diffs[key] = item2;
        return;
      }

      if (type1 === '[object Object]') {
        const objDiff = getDifferences(item1, item2);
        if (Object.keys(objDiff).length > 0) {
          diffs[key] = objDiff;
        }
        return;
      }

      if (type1 === '[object Array]') {
        if (!arraysMatch(item1, item2)) {
          diffs[key] = item2;
        }
        return;
      }
      if (type1 === '[object Function]') {
        if (item1.toString() !== item2.toString()) {
          diffs[key] = item2;
        }
      } else {
        if (item1 !== item2) {
          diffs[key] = item2;
        }
      }
    }
    for (key in obj1) {
      if (obj1.hasOwnProperty(key)) {
        compare(obj1[key], obj2[key], key);
      }
    }
    for (key in obj2) {
      if (obj2.hasOwnProperty(key)) {
        if (!obj1[key] && obj1[key] !== obj2[key]) {
          diffs[key] = obj2[key];
        }
      }
    }

    return diffs;
  }

  function generateRequestData() {
    const selectedSettings = {};
    const requestData = { settings: {}, alias: '', label: '' };
    let alias = '';
    let label = '';
    vm.tabs.map((tab) => {
      if (tab.settings.length) {
        alias = vm.stylingProperties.alias.alias;
        label = vm.stylingProperties.alias.value;
      }
      let tmp = {};
      if (tab.styledSectionsSettings.length) {
        tab.styledSectionsSettings.map((section) => {
          tmp[section.property] = {};
          section.subSections.forEach((subsection) => {
            tmp[section.property][subsection.property] = {};
            subsection.settings.forEach((setting) => {
              tmp[section.property][subsection.property][setting.property] = {};

              if (
                setting.value &&
                setting.value !== 'Select value' &&
                !setting.variants?.length
              ) {
                tmp[section.property][subsection.property][setting.property] =
                  setting.value;
              }
              if (setting.variants?.length) {
                if (!setting.value) {
                  setting.variants[0].forEach((variant) => {
                    if (variant.value !== 'Select value' && variant.value) {
                      tmp[section.property][subsection.property][
                        setting.property
                      ][variant.property] = variant.value;
                    }
                  });
                } else {
                  setting.variants[1].forEach((variant) => {
                    if (
                      (variant.value !== 'Select value' && variant.value) ||
                      variant.type === 'toggle'
                    ) {
                      tmp[section.property][subsection.property][
                        setting.property
                      ][variant.property] = variant.value;
                    }
                  });
                }
              }
            });
          });
        });
      }
      clearEmpties(tmp);
      if (Object.keys(tmp).length) {
        selectedSettings[tab.selector] = tmp;
      }
    });
    const changedData = getDifferences(
      vm.defaultValues[vm.brandName].settings,
      selectedSettings
    );
    if (Object.keys(changedData).length) {
      (requestData.settings = changedData),
        (requestData.alias = alias),
        (requestData.label = label);
    }
    if (Object.keys(requestData.settings).length) {
      return requestData;
    } else return undefined;
  }

  function selectSection(item, property) {
    property.value = item.label;
    property.alias = item.alias;

    if (property.value !== '') {
      vm.tabs.forEach((tab) => {
        vm.setShowPickersInSection(
          tab.settings,
          ['add-subsection', 'preview', 'defaults'],
          true
        );
      });
      vm.handleDropDownClose(property);
    }
  }
  function addSubsection(item, selectedTab, index) {
    const currentDropDown = selectedTab.settings[index];
    const selectedSection = currentDropDown.items.indexOf(item);
    currentDropDown.items.splice(selectedSection, 1);
    selectedTab.styledSectionsSettings.push(item);
    vm.handleDropDownClose(currentDropDown);
  }

  function setShowPickersInSection(settings, ids, show) {
    settings.forEach((setting) => {
      if (ids.some((id) => id === setting.id)) {
        setting.show = show;
      }
    });
  }
  function getSectionDropDownValue(currentDropDown) {
    if (!currentDropDown.value || currentDropDown.value === 'Select value') {
      if (vm.context.label) {
        currentDropDown.value = vm.context.label;
      } else {
        currentDropDown.value = 'Select value';
      }
    }
  }
  function getDropDownValue(currentDropDown) {
    if (
      typeof currentDropDown.value !== 'number' &&
      !currentDropDown.value?.length
    ) {
      currentDropDown.value = 'Select value';
    }
  }

  function mouseOver(setting) {
    setting.showTooltip = true;
  }

  function mouseLeave(setting) {
    setting.showTooltip = false;
  }

  function toggle(currentSetting) {
    if (currentSetting) {
      currentSetting.value = !currentSetting.value;
    }
  }

  function toggleTabShow(selectedTab, tabIndex) {
    vm.selectTab(selectedTab.selector);
    selectedTab.show = !selectedTab.show;
    if (selectedTab.show && tabIndex) {
      const previousSettings = structuredClone(vm.tabs[tabIndex - 1].settings)
        .length
        ? structuredClone(vm.tabs[tabIndex - 1].settings)
        : structuredClone(vm.tabs[0].settings);
      const previosStyledSectionsSettings = structuredClone(
        vm.tabs[tabIndex - 1].styledSectionsSettings
      ).length
        ? structuredClone(vm.tabs[tabIndex - 1].styledSectionsSettings)
        : structuredClone(vm.tabs[0].styledSectionsSettings);

      selectedTab.settings = previousSettings;
      selectedTab.styledSectionsSettings = previosStyledSectionsSettings;
    }
    if (!selectedTab.show) {
      selectedTab.settings = [];
      selectedTab.styledSectionsSettings = [];
      vm.selectTab(vm.tabs[0].selector);
    }
  }

  function getButtonLabel(show, tabButton) {
    return show ? `Add ${tabButton.label}` : `Remove ${tabButton.label}`;
  }

  function selectTab(tabSelector) {
    vm.tabselector = tabSelector;
  }

  function addActiveClass(tabSelector) {
    if (tabSelector === vm.tabselector) {
      return 'activetab';
    } else return '';
  }
}
angular
  .module('umbraco')
  .controller(
    'CssStylesPicker.EditorDialog.Controller',
    cssStylesPickerEditorDialogController
  );