Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
62 kB
2
Indexable
Never
function cssStylesPickerEditorDialogController($scope, formHelper) {
  const vm = this;
  vm.defaultValues = {
    alias: 'title',
    settings: {
      container: {
        mobile: {
          spacing: {
            padding: {
              t: '4px',
              b: '8px',
              l: '16px',
              r: '24px',
            },
            margin: {
              all: '4px',
            },
          },
          background: {
            color: {
              color: '#ffe599',
              transparent: true,
            },
          },
          border: {
            radius: {
              tl: 'S',
              tr: 'M',
              bl: 'M',
              br: 'S',
            },
            width: 'width 2px',
            color: '#ffe599',
            style: 'Double',
          },
          effects: {
            shadow: 'Auto',
            color: '#744700',
            opacity: '5%',
          },
          sizing: {
            width: 'Screen',
            height: '8px',
          },
        },
        desktop: {
          spacing: {
            padding: {
              t: '4px',
              b: '8px',
              l: '16px',
              r: '24px',
            },
            margin: {
              all: '4px',
            },
          },
          background: {
            color: {
              color: '#ffe599',
              transparent: true,
            },
          },
          border: {
            radius: {
              tl: 'S',
              tr: 'M',
              bl: 'M',
              br: 'S',
            },
            width: 'width 2px',
            color: '#ffe599',
            style: 'Double',
          },
          effects: {
            shadow: 'Auto',
            color: '#744700',
            opacity: '5%',
          },
          sizing: {
            width: 'Screen',
            height: '8px',
          },
        },
      },
      text: {
        mobile: {
          typography: {
            family: 'Sans',
            size: 'S',
            smoothing: true,
            italic: true,
            weight: '200 (extralight)',
            spacing: '-0.05em (tighter)',
            lineHeight: '.75rem/12px',
            align: 'Center',
            color: '#744700',
            decoration: 'Underine',
            decorationColor: '#16537e',
            decorationStyle: 'Double',
            thickness: 'From font',
            underlineOffset: 'From font',
          },
          spacing: {
            padding: {
              t: '4px',
              b: '16px',
              l: '4px',
              r: '4px',
            },
            margin: {
              all: '4px',
            },
          },
          background: {
            color: 'Transparent',
          },
          effects: {
            opacity: '5%',
          },
          sizing: {
            width: 'Full',
            height: '8px',
          },
        },
      },
      icon: {
        mobile: {
          spacing: {
            padding: {
              t: '4px',
              b: '16px',
              l: '8px',
              r: '16px',
            },
            undefined: {
              all: 'None',
            },
          },
          background: {
            color: 'Current',
          },
          effects: {
            opacity: '10%',
          },
          sizing: {
            width: 'Auto',
            height: '4px',
          },
          svg: {
            fill: {
              customFill: 'Inherit',
            },
            stroke: 'width 2px',
            width: 1,
          },
        },
      },
      image: {
        mobile: {
          spacing: {
            padding: {
              t: '8px',
              b: '16px',
              l: '48px',
              r: 'None',
            },
            margin: {
              all: '8px',
            },
          },
          background: {
            color: 'Current',
          },
          border: {
            radius: {
              tl: 'L',
              tr: 'L',
              bl: 'S',
              br: 'M',
            },
            width: 'width 0px',
            color: '#444444',
            style: 'Solid',
          },
          effects: {
            opacity: '5%',
          },
          sizing: {
            width: 'Full',
            height: '4px',
          },
        },
      },
    },
  };
  vm.saveButtonState = 'init';
  vm.close = close;
  vm.submit = submit;
  vm.init = init;

  vm.availableProperties = [];
  vm.context = {};
  vm.stylingProperties = {};
  vm.generateRequestData = generateRequestData;
  vm.requestData = {};

  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
    } else {
      // vm.context = defaults
    }
  }

  vm.init();

  // 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',
    '2XL',
    '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', '2XL', 'Inner'];
  const customFillColor = ['None', 'Inherit', 'Current', 'Transparent'];

  const containerSettings = {
    title: 'Container',
    property: 'container',
    mobile: [
      {
        title: 'Spacing',
        property: 'spacing',
        settings: [
          {
            name: 'Set custom padding',
            type: 'toggle',
            value: false,
            show: true,
            property: 'padding',
            variants: [
              [
                {
                  name: 'Padding All',
                  property: 'all',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
              ],
              [
                {
                  name: 'Padding Top',
                  property: 't',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
                {
                  name: 'Padding Bottom',
                  property: 'b',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
                {
                  name: 'Padding Left',
                  property: 'l',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
                {
                  name: 'Padding Right',
                  property: 'r',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
              ],
            ],
          },
          {
            name: 'Set custom margin',
            property: 'margin',
            type: 'toggle',
            value: false,
            show: true,
            variants: [
              [
                {
                  name: 'Margin All',
                  property: 'all',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
              ],
              [
                {
                  name: 'Margin Top',
                  property: 't',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
                {
                  name: 'Margin Bottom',
                  property: 'b',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
                {
                  name: 'Margin Left',
                  property: 'l',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
                {
                  name: 'Margin Right',
                  property: 'r',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
              ],
            ],
          },
        ],
      },
      {
        title: 'Background',
        property: 'background',
        isOnlyMobile: true,
        settings: [
          {
            name: 'Set gradient',
            property: 'color',
            type: 'toggle',
            value: false,
            show: true,
            variants: [
              [
                {
                  name: 'Color',
                  property: 'color',
                  type: 'colorPicker',
                  value: '',
                },
                {
                  name: 'Transparent',
                  property: 'transparent',
                  type: 'toggle',
                  value: false,
                  show: true,
                },
              ],
              [
                {
                  name: 'From',
                  property: 'from',
                  type: 'colorPicker',
                  value: '',
                },
                {
                  name: 'Set From color transparent',
                  property: 'fromTransparent',
                  type: 'toggle',
                  value: false,
                  show: true,
                },

                {
                  name: 'To',
                  propery: 'to',
                  type: 'colorPicker',
                  value: '',
                },
                {
                  name: 'Set To color transparent',
                  property: 'toTransparent',
                  type: 'toggle',
                  value: false,
                  show: true,
                },
                {
                  name: 'Direction',
                  property: 'direction',
                  type: 'dropdown',
                  value: '',
                  items: gradientDirectionValues,
                },
              ],
            ],
          },
        ],
      },
      {
        title: 'Border',
        property: 'border',
        settings: [
          {
            name: 'Set custom radius',
            property: 'radius',
            type: 'toggle',
            value: false,
            show: true,
            variants: [
              [
                {
                  name: 'Radius All',
                  property: 'all',
                  type: 'dropdown',
                  value: '',
                  items: radiusValues,
                },
              ],
              [
                {
                  name: 'Radius Top Left',
                  property: 'tl',
                  type: 'dropdown',
                  value: '',
                  items: radiusValues,
                },
                {
                  name: 'Radius Top Right',
                  property: 'tr',
                  type: 'dropdown',
                  value: '',
                  items: radiusValues,
                },
                {
                  name: 'Radius Bottom Left',
                  property: 'bl',
                  type: 'dropdown',
                  value: '',
                  items: radiusValues,
                },
                {
                  name: 'Radius Bottom Right',
                  property: 'br',
                  type: 'dropdown',
                  value: '',
                  items: radiusValues,
                },
              ],
            ],
          },
          {
            name: 'Width',
            isOnlyMobile: true,
            property: 'width',
            type: 'dropdown',
            value: '',
            items: borderWidthValues,
          },
          {
            name: 'Color',
            isOnlyMobile: true,
            property: 'color',
            type: 'colorPicker',
            value: '',
          },
          {
            name: 'Style',
            isOnlyMobile: true,
            property: 'style',
            type: 'dropdown',
            value: '',
            items: borderStyleValues,
          },
        ],
      },
      {
        title: 'Effects',
        property: 'effects',
        isOnlyMobile: true,
        settings: [
          {
            name: 'Shadow',
            property: 'shadow',
            type: 'dropdown',
            value: '',
            items: shadowValues,
          },
          {
            name: 'Color',
            property: 'color',
            type: 'colorPicker',
            value: '',
          },

          {
            name: 'Opacity',
            property: 'opacity',
            type: 'dropdown',
            value: '',
            items: opacityValues,
          },
        ],
      },
      {
        title: 'Sizing',
        property: 'sizing',
        settings: [
          {
            name: 'Width',
            property: 'width',
            type: 'dropdown',
            value: '',
            items: widthSizeValues,
          },
          {
            name: 'Height',
            property: 'height',
            type: 'dropdown',
            value: '',
            items: heightSizeValues,
          },
        ],
      },
    ],
    tablet: [
      {
        title: 'Spacing',
        property: 'spacing',
        settings: [
          {
            name: 'Set custom padding',
            type: 'toggle',
            value: false,
            show: true,
            property: 'padding',
            variants: [
              [
                {
                  name: 'Padding All',
                  property: 'all',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
              ],
              [
                {
                  name: 'Padding Top',
                  property: 't',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
                {
                  name: 'Padding Bottom',
                  property: 'b',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
                {
                  name: 'Padding Left',
                  property: 'l',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
                {
                  name: 'Padding Right',
                  property: 'r',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
              ],
            ],
          },
          {
            name: 'Set custom margin',
            property: 'margin',
            type: 'toggle',
            value: false,
            show: true,
            variants: [
              [
                {
                  name: 'Margin All',
                  property: 'all',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
              ],
              [
                {
                  name: 'Margin Top',
                  property: 't',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
                {
                  name: 'Margin Bottom',
                  property: 'b',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
                {
                  name: 'Margin Left',
                  property: 'l',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
                {
                  name: 'Margin Right',
                  property: 'r',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
              ],
            ],
          },
        ],
      },
      {
        title: 'Background',
        property: 'background',
        isOnlyMobile: true,
        settings: [
          {
            name: 'Set gradient',
            property: 'color',
            type: 'toggle',
            value: false,
            show: true,
            variants: [
              [
                {
                  name: 'Color',
                  property: 'color',
                  type: 'colorPicker',
                  value: '',
                },
                {
                  name: 'Transparent',
                  property: 'transparent',
                  type: 'toggle',
                  value: false,
                  show: true,
                },
              ],
              [
                {
                  name: 'From',
                  property: 'from',
                  type: 'colorPicker',
                  value: '',
                },
                {
                  name: 'Set From color transparent',
                  property: 'fromTransparent',
                  type: 'toggle',
                  value: false,
                  show: true,
                },

                {
                  name: 'To',
                  propery: 'to',
                  type: 'colorPicker',
                  value: '',
                },
                {
                  name: 'Set To color transparent',
                  property: 'toTransparent',
                  type: 'toggle',
                  value: false,
                  show: true,
                },
                {
                  name: 'Direction',
                  property: 'direction',
                  type: 'dropdown',
                  value: '',
                  items: gradientDirectionValues,
                },
              ],
            ],
          },
        ],
      },
      {
        title: 'Border',
        property: 'border',
        settings: [
          {
            name: 'Set custom radius',
            property: 'radius',
            type: 'toggle',
            value: false,
            show: true,
            variants: [
              [
                {
                  name: 'Radius All',
                  property: 'all',
                  type: 'dropdown',
                  value: '',
                  items: radiusValues,
                },
              ],
              [
                {
                  name: 'Radius Top Left',
                  property: 'tl',
                  type: 'dropdown',
                  value: '',
                  items: radiusValues,
                },
                {
                  name: 'Radius Top Right',
                  property: 'tr',
                  type: 'dropdown',
                  value: '',
                  items: radiusValues,
                },
                {
                  name: 'Radius Bottom Left',
                  property: 'bl',
                  type: 'dropdown',
                  value: '',
                  items: radiusValues,
                },
                {
                  name: 'Radius Bottom Right',
                  property: 'br',
                  type: 'dropdown',
                  value: '',
                  items: radiusValues,
                },
              ],
            ],
          },
          {
            name: 'Width',
            isOnlyMobile: true,
            property: 'width',
            type: 'dropdown',
            value: '',
            items: borderWidthValues,
          },
          {
            name: 'Color',
            isOnlyMobile: true,
            property: 'color',
            type: 'colorPicker',
            value: '',
          },
          {
            name: 'Style',
            isOnlyMobile: true,
            property: 'style',
            type: 'dropdown',
            value: '',
            items: borderStyleValues,
          },
        ],
      },
      {
        title: 'Effects',
        property: 'effects',
        isOnlyMobile: true,
        settings: [
          {
            name: 'Shadow',
            property: 'shadow',
            type: 'dropdown',
            value: '',
            items: shadowValues,
          },
          {
            name: 'Color',
            property: 'color',
            type: 'colorPicker',
            value: '',
          },

          {
            name: 'Opacity',
            property: 'opacity',
            type: 'dropdown',
            value: '',
            items: opacityValues,
          },
        ],
      },
      {
        title: 'Sizing',
        property: 'sizing',
        settings: [
          {
            name: 'Width',
            property: 'width',
            type: 'dropdown',
            value: '',
            items: widthSizeValues,
          },
          {
            name: 'Height',
            property: 'height',
            type: 'dropdown',
            value: '',
            items: heightSizeValues,
          },
        ],
      },
    ],
    desctop: [
      {
        title: 'Spacing',
        property: 'spacing',
        settings: [
          {
            name: 'Set custom padding',
            type: 'toggle',
            value: false,
            show: true,
            property: 'padding',
            variants: [
              [
                {
                  name: 'Padding All',
                  property: 'all',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
              ],
              [
                {
                  name: 'Padding Top',
                  property: 't',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
                {
                  name: 'Padding Bottom',
                  property: 'b',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
                {
                  name: 'Padding Left',
                  property: 'l',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
                {
                  name: 'Padding Right',
                  property: 'r',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
              ],
            ],
          },
          {
            name: 'Set custom margin',
            property: 'margin',
            type: 'toggle',
            value: false,
            show: true,
            variants: [
              [
                {
                  name: 'Margin All',
                  property: 'all',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
              ],
              [
                {
                  name: 'Margin Top',
                  property: 't',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
                {
                  name: 'Margin Bottom',
                  property: 'b',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
                {
                  name: 'Margin Left',
                  property: 'l',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
                {
                  name: 'Margin Right',
                  property: 'r',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
              ],
            ],
          },
        ],
      },
      {
        title: 'Background',
        property: 'background',
        isOnlyMobile: true,
        settings: [
          {
            name: 'Set gradient',
            property: 'color',
            type: 'toggle',
            value: false,
            show: true,
            variants: [
              [
                {
                  name: 'Color',
                  property: 'color',
                  type: 'colorPicker',
                  value: '',
                },
                {
                  name: 'Transparent',
                  property: 'transparent',
                  type: 'toggle',
                  value: false,
                  show: true,
                },
              ],
              [
                {
                  name: 'From',
                  property: 'from',
                  type: 'colorPicker',
                  value: '',
                },
                {
                  name: 'Set From color transparent',
                  property: 'fromTransparent',
                  type: 'toggle',
                  value: false,
                  show: true,
                },

                {
                  name: 'To',
                  propery: 'to',
                  type: 'colorPicker',
                  value: '',
                },
                {
                  name: 'Set To color transparent',
                  property: 'toTransparent',
                  type: 'toggle',
                  value: false,
                  show: true,
                },
                {
                  name: 'Direction',
                  property: 'direction',
                  type: 'dropdown',
                  value: '',
                  items: gradientDirectionValues,
                },
              ],
            ],
          },
        ],
      },
      {
        title: 'Border',
        property: 'border',
        settings: [
          {
            name: 'Set custom radius',
            property: 'radius',
            type: 'toggle',
            value: false,
            show: true,
            variants: [
              [
                {
                  name: 'Radius All',
                  property: 'all',
                  type: 'dropdown',
                  value: '',
                  items: radiusValues,
                },
              ],
              [
                {
                  name: 'Radius Top Left',
                  property: 'tl',
                  type: 'dropdown',
                  value: '',
                  items: radiusValues,
                },
                {
                  name: 'Radius Top Right',
                  property: 'tr',
                  type: 'dropdown',
                  value: '',
                  items: radiusValues,
                },
                {
                  name: 'Radius Bottom Left',
                  property: 'bl',
                  type: 'dropdown',
                  value: '',
                  items: radiusValues,
                },
                {
                  name: 'Radius Bottom Right',
                  property: 'br',
                  type: 'dropdown',
                  value: '',
                  items: radiusValues,
                },
              ],
            ],
          },
          {
            name: 'Width',
            isOnlyMobile: true,
            property: 'width',
            type: 'dropdown',
            value: '',
            items: borderWidthValues,
          },
          {
            name: 'Color',
            isOnlyMobile: true,
            property: 'color',
            type: 'colorPicker',
            value: '',
          },
          {
            name: 'Style',
            isOnlyMobile: true,
            property: 'style',
            type: 'dropdown',
            value: '',
            items: borderStyleValues,
          },
        ],
      },
      {
        title: 'Effects',
        property: 'effects',
        isOnlyMobile: true,
        settings: [
          {
            name: 'Shadow',
            property: 'shadow',
            type: 'dropdown',
            value: '',
            items: shadowValues,
          },
          {
            name: 'Color',
            property: 'color',
            type: 'colorPicker',
            value: '',
          },

          {
            name: 'Opacity',
            property: 'opacity',
            type: 'dropdown',
            value: '',
            items: opacityValues,
          },
        ],
      },
      {
        title: 'Sizing',
        property: 'sizing',
        settings: [
          {
            name: 'Width',
            property: 'width',
            type: 'dropdown',
            value: '',
            items: widthSizeValues,
          },
          {
            name: 'Height',
            property: 'height',
            type: 'dropdown',
            value: '',
            items: heightSizeValues,
          },
        ],
      },
    ],
  };
  const textSettings = {
    title: 'Text',
    property: 'text',
    subSections: [
      {
        title: 'Typography',
        property: 'typography',
        settings: [
          {
            name: 'Font family',
            property: 'family',
            isOnlyMobile: true,
            type: 'dropdown',
            value: '',
            items: fontFamilyValues,
          },
          {
            name: 'Font size',
            property: 'size',
            type: 'dropdown',
            value: '',
            items: fontSizeValues,
          },
          {
            name: 'Set antialiased smoothing',
            property: 'smoothing',
            isOnlyMobile: true,
            type: 'toggle',
            show: 'true',
            value: false,
            show: true,
          },
          {
            name: 'Set italic',
            property: 'italic',
            isOnlyMobile: true,
            type: 'toggle',
            value: false,
            show: true,
          },
          {
            name: 'Weight',
            property: 'weight',
            type: 'dropdown',
            value: '',
            items: fontWeightValues,
          },
          {
            name: 'Letter Spacing',
            property: 'spacing',
            isOnlyMobile: true,
            type: 'dropdown',
            value: '',
            items: letterSpacingValues,
          },
          {
            name: 'Line height',
            property: 'lineHeight',
            type: 'dropdown',
            value: '',
            items: lineHeightValues,
          },
          {
            name: 'Text align',
            property: 'align',
            type: 'dropdown',
            value: '',
            items: textAlignValues,
          },
          {
            name: 'Color',
            property: 'color',
            isOnlyMobile: true,
            type: 'colorPicker',
            value: '',
          },
          {
            name: 'Decoration',
            property: 'decoration',
            isOnlyMobile: true,
            type: 'dropdown',
            value: '',
            items: textDecorationValues,
          },
          {
            name: 'Decoration color',
            property: 'decorationColor',
            isOnlyMobile: true,
            type: 'colorPicker',
            value: '',
          },
          {
            name: 'Decoration Style',
            property: 'decorationStyle',
            isOnlyMobile: true,
            type: 'dropdown',
            value: '',
            items: textDecorationStyleValues,
          },
          {
            name: 'Text Decoration thickness',
            property: 'thickness',
            isOnlyMobile: true,
            type: 'dropdown',
            value: '',
            items: textDecorationThicknessValues,
          },
          {
            name: 'Text underline offset',
            property: 'underlineOffset',
            type: 'dropdown',
            value: '',
            items: textDecorationOffsetValues,
          },
          {
            name: 'Text transform',
            property: 'textTransform',
            isOnlyMobile: true,
            type: 'dropdown',
            value: '',
            items: textTransformValues,
          },
        ],
      },
      {
        title: 'Spacing',
        property: 'spacing',
        settings: [
          {
            name: 'Set custom padding',
            property: 'padding',
            type: 'toggle',
            value: false,
            show: true,
            variants: [
              [
                {
                  name: 'Padding All',
                  property: 'all',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
              ],
              [
                {
                  name: 'Padding Top',
                  property: 't',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
                {
                  name: 'Padding Bottom',
                  property: 'b',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
                {
                  name: 'Padding Left',
                  property: 'l',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
                {
                  name: 'Padding Right',
                  property: 'r',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
              ],
            ],
          },
          {
            name: 'Set custom margin',
            property: 'margin',
            type: 'toggle',
            value: false,
            show: true,
            variants: [
              [
                {
                  name: 'Margin All',
                  property: 'all',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
              ],
              [
                {
                  name: 'Margin Top',
                  property: 't',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
                {
                  name: 'Margin Bottom',
                  property: 't',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
                {
                  name: 'Margin Left',
                  property: 'l',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
                {
                  name: 'Margin Right',
                  property: 'r',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
              ],
            ],
          },
        ],
      },
      {
        title: 'Background',
        property: 'background',
        isOnlyMobile: true,
        settings: [
          {
            name: 'Color',
            property: 'color',
            type: 'dropdown',
            value: '',
            items: ['Current', 'Transparent'],
          },
        ],
      },
      {
        title: 'Effects',
        property: 'effects',
        isOnlyMobile: true,
        settings: [
          {
            name: 'Opacity',
            property: 'opacity',
            type: 'dropdown',
            value: '',
            items: opacityValues,
          },
        ],
      },
      {
        title: 'Sizing',
        property: 'sizing',
        settings: [
          {
            name: 'Width',
            property: 'width',
            type: 'dropdown',
            value: '',
            items: widthSizeValues,
          },
          {
            name: 'Height',
            property: 'height',
            type: 'dropdown',
            value: '',
            items: heightSizeValues,
          },
        ],
      },
    ],
  };
  const imageSettings = {
    title: 'Image',
    property: 'image',
    subSections: [
      {
        title: 'Spacing',
        property: 'spacing',
        settings: [
          {
            name: 'Set custom padding',
            property: 'padding',
            type: 'toggle',
            value: false,
            show: true,
            variants: [
              [
                {
                  name: 'Padding All',
                  property: 'all',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
              ],
              [
                {
                  name: 'Padding Top',
                  property: 't',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
                {
                  name: 'Padding Bottom',
                  property: 'b',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
                {
                  name: 'Padding Left',
                  property: 'l',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
                {
                  name: 'Padding Right',
                  property: 'r',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
              ],
            ],
          },
          {
            name: 'Set custom margin',
            property: 'margin',
            type: 'toggle',
            value: false,
            show: true,
            variants: [
              [
                {
                  name: 'Margin All',
                  property: 'all',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
              ],
              [
                {
                  name: 'Margin Top',
                  property: 't',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
                {
                  name: 'Margin Bottom',
                  property: 'b',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
                {
                  name: 'Margin Left',
                  property: 'l',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
                {
                  name: 'Margin Right',
                  property: 'r',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
              ],
            ],
          },
        ],
      },
      {
        title: 'Background',
        property: 'background',
        isOnlyMobile: true,
        settings: [
          {
            name: 'Color',
            property: 'color',
            type: 'dropdown',
            value: '',
            items: ['Current', 'Transparent'],
          },
        ],
      },
      {
        title: 'Border',
        property: 'border',
        settings: [
          {
            name: 'Set custom radius',
            property: 'radius',
            type: 'toggle',
            value: false,
            show: true,
            variants: [
              [
                {
                  name: 'Radius All',
                  property: 'all',
                  type: 'dropdown',
                  value: '',
                  items: radiusValues,
                },
              ],
              [
                {
                  name: 'Radius Top Left',
                  property: 'tl',
                  type: 'dropdown',
                  value: '',
                  items: radiusValues,
                },
                {
                  name: 'Radius Top Right',
                  property: 'tr',
                  type: 'dropdown',
                  value: '',
                  items: radiusValues,
                },
                {
                  name: 'Radius Bottom Left',
                  property: 'bl',
                  type: 'dropdown',
                  value: '',
                  items: radiusValues,
                },
                {
                  name: 'Radius Bottom Right',
                  property: 'br',
                  type: 'dropdown',
                  value: '',
                  items: radiusValues,
                },
              ],
            ],
          },
          {
            name: 'Width',
            property: 'width',
            isOnlyMobile: true,
            type: 'dropdown',
            value: '',
            items: borderWidthValues,
          },
          {
            name: 'Color',
            property: 'color',
            isOnlyMobile: true,
            type: 'colorPicker',
            value: '',
          },
          {
            name: 'Style',
            property: 'style',
            isOnlyMobile: true,
            type: 'dropdown',
            value: '',
            items: borderStyleValues,
          },
        ],
      },
      {
        title: 'Effects',
        property: 'effects',
        isOnlyMobile: true,
        settings: [
          {
            name: 'Opacity',
            property: 'opacity',
            type: 'dropdown',
            value: '',
            items: opacityValues,
          },
        ],
      },
      {
        title: 'Sizing',
        property: 'sizing',
        settings: [
          {
            name: 'Width',
            property: 'width',
            type: 'dropdown',
            value: '',
            items: widthSizeValues,
          },
          {
            name: 'Height',
            property: 'height',
            type: 'dropdown',
            value: '',
            items: heightSizeValues,
          },
        ],
      },
    ],
  };
  const iconSettings = {
    title: 'Icon',
    property: 'icon',
    subSections: [
      {
        title: 'Spacing',
        property: 'spacing',
        settings: [
          {
            name: 'Set custom padding',
            property: 'padding',
            type: 'toggle',
            value: false,
            show: true,
            variants: [
              [
                {
                  name: 'Padding All',
                  property: 'all',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
              ],
              [
                {
                  name: 'Padding Top',
                  property: 't',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
                {
                  name: 'Padding Bottom',
                  property: 'b',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
                {
                  name: 'Padding Left',
                  property: 'l',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
                {
                  name: 'Padding Right',
                  property: 'r',
                  type: 'dropdown',
                  value: '',
                  items: paddingValues,
                },
              ],
            ],
          },
          {
            name: 'Set custom margin',
            type: 'toggle',
            value: false,
            show: true,
            variants: [
              [
                {
                  name: 'Margin All',
                  property: 'all',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
              ],
              [
                {
                  name: 'Margin Top',
                  property: 't',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
                {
                  name: 'Margin Bottom',
                  property: 'b',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
                {
                  name: 'Margin Left',
                  property: 'l',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
                {
                  name: 'Margin Right',
                  property: 'r',
                  type: 'dropdown',
                  value: '',
                  items: marginValues,
                },
              ],
            ],
          },
        ],
      },
      {
        title: 'Background',
        property: 'background',
        isOnlyMobile: true,
        settings: [
          {
            name: 'Color',
            property: 'color',
            type: 'dropdown',
            value: '',
            items: ['Current', 'Transparent'],
          },
        ],
      },
      {
        title: 'Effects',
        property: 'effects',
        isOnlyMobile: true,
        settings: [
          {
            name: 'Opacity',
            property: 'opacity',
            type: 'dropdown',
            value: '',
            items: opacityValues,
          },
        ],
      },
      {
        title: 'Sizing',
        property: 'sizing',
        settings: [
          {
            name: 'Width',
            property: 'width',
            type: 'dropdown',
            value: '',
            items: widthSizeValues,
          },
          {
            name: 'Height',
            property: 'height',
            type: 'dropdown',
            value: '',
            items: heightSizeValues,
          },
        ],
      },
      {
        title: 'SVG',
        property: 'svg',
        isOnlyMobile: true,
        settings: [
          {
            name: 'Set custom fill',
            property: 'fill',
            type: 'toggle',
            value: false,
            show: true,
            variants: [
              [
                {
                  name: 'Fill',
                  property: 'fill',
                  type: 'colorPicker',
                  value: '',
                },
              ],
              [
                {
                  name: 'Fill',
                  property: 'customFill',
                  type: 'dropdown',
                  value: '',
                  items: customFillColor,
                },
              ],
            ],
          },
          {
            name: 'Stroke',
            property: 'stroke',
            type: 'dropdown',
            value: '',
            items: borderWidthValues,
          },
          {
            name: 'Width',
            property: 'width',
            type: 'dropdown',
            value: '',
            items: [0, 1, 2],
          },
        ],
      },
    ],
  };
  console.log(vm.defaultValues.alias);
  const basicSettings = [
    {
      name: 'Add Styles for',
      type: 'dropdown-add',
      id: 'add-subsection',
      value: '',
      show: vm.defaultValues.alias,
      items: [containerSettings],
    },
    {
      name: 'Show preview',
      type: 'toggle',
      id: 'preview',
      show: vm.defaultValues.alias,
      value: false,
    },
    {
      name: 'Show defaults',
      type: 'toggle',
      id: 'defaults',
      value: false,
      show: vm.defaultValues.alias,
      showTooltip: false,
      tooltipMessage:
        "Show default values for sections. If you don't choose any styles, those styles will be applied.",
    },
  ];

  // Constants End -----------------------------------------------

  // Additional Styling start -------------------------------------------------------
  vm.tabselector = 'mobile';
  vm.handleDropDownOpen = handleDropDownOpen;
  vm.handleDropDownClose = handleDropDownClose;
  vm.selectDropDownValue = selectDropDownValue;
  vm.selectSection = selectSection;
  vm.addSubsection = addSubsection;
  vm.setShowPickersInSection = setShowPickersInSection;
  vm.getDropDownValue = getDropDownValue;
  vm.mouseOver = mouseOver;
  vm.mouseLeave = mouseLeave;
  vm.toggle = toggle;
  vm.toggleTabShow = toggleTabShow;
  vm.getButtonLabel = getButtonLabel;
  vm.selectTab = selectTab;
  vm.addActiveClass = addActiveClass;
  vm.changeColor = changeColor;

  vm.tabs = [
    {
      label: 'Mobile',
      settings: basicSettings,
      selector: 'mobile',
      show: true,
      isRemovable: false,
      styledSectionsSettings: [],
    },
    {
      label: 'Tablet',
      settings: basicSettings,
      selector: 'tablet',
      show: Object.values(vm.defaultValues.settings).find((el) =>
        el.hasOwnProperty('tablet')
      ),
      isRemovable: true,
      styledSectionsSettings: [],
    },
    {
      label: 'Desktop',
      settings: basicSettings,
      selector: 'desktop',
      show: Object.values(vm.defaultValues.settings).find((el) =>
        el.hasOwnProperty('desktop')
      ),
      isRemovable: true,
      styledSectionsSettings: [],
    },
  ];
  vm.stylingProperties = {
    alias: {
      name: 'Section',
      type: 'dropdown',
      id: 'section',
      value: vm.defaultValues.alias ?? '',
      show: true,
      items: ['Title', 'Pretitle', 'Description'],
    },
    settings: [containerSettings],
  };
  console.log(vm.stylingProperties);
  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 (var 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 generateRequestData() {
    const requestData = { settings: {}, alias: '', label: '' };
    vm.stylingProperties.settings.map((tab) => {
      let alias = '';
      let label = '';
      if (tab.settings.length && tab.settings[0].value) {
        alias = tab.settings[0].model.alias;
        label = tab.settings[0].model.label;
      }
      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) {
                      tmp[section.property][subsection.property][
                        setting.property
                      ][variant.property] = variant.value;
                    }
                  });
                }
              }
            });
          });
        });
      }
      clearEmpties(tmp);
      if (Object.keys(tmp).length) {
        requestData.settings[tab.selector] = tmp;
        requestData.alias = alias;
        requestData.label = label;
      }
    });
    return requestData;
  }

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

    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) {
    console.log(settings);
    settings.forEach((setting) => {
      if (ids.some((id) => id === setting.id)) {
        setting.show = show;
      }
    });
  }

  function getDropDownValue(currentDropDown) {
    if (!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) {
    console.log(selectedTab);
    console.log(tabIndex);
    vm.selectTab(selectedTab.selector);
    selectedTab.show = !selectedTab.show;
    if (selectedTab.show && tabIndex) {
      console.log(vm.stylingProperties);
      const previousSettings = structuredClone(
        vm.stylingProperties.settings[tabIndex - 1][selectedTab.selector]
      ).length
        ? structuredClone(vm.stylingProperties.settings[tabIndex - 1].settings)
        : structuredClone(vm.stylingProperties.settings[0].settings);
      const previosStyledSectionsSettings = structuredClone(
        vm.stylingProperties.settings[tabIndex - 1][selectedTab.selector]
      ).length
        ? structuredClone(
            vm.stylingProperties.settings[tabIndex - 1][selectedTab.selector]
          )
        : structuredClone(
            vm.stylingProperties.settings[0][selectedTab.selector]
          );
      selectedTab.settings = previousSettings;
      selectedTab.styledSectionsSettings = previosStyledSectionsSettings;
    }
    if (!selectedTab.show) {
      selectedTab.settings = [];
      selectedTab.styledSectionsSettings = [];
      vm.selectTab('mobile');
    }
  }

  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
  );