import { IHTMLElement } from '../interfaces/IHTMLElement';

export const DOTS = [
  {
    name: 'rotate',
    styles: {
      width: '20px',
      height: '20px',
      top: '-20px',
      left: '-20px',
      transform: 'translateX(-50%)',
      backgroundImage:
        'url("https://findicons.com/files/icons/1620/crystal_project/16/rotate_ccw.png") 100% 100% !important',
      cursor:
        'url("https://findicons.com/files/icons/1620/crystal_project/16/rotate_ccw.png"), auto',
    },
  },
  {
    name: 'left-top',
    styles: {
      top: '-5px',
      left: '-5px',
    },
    config: {
      left: true,
      top: true,
      xR: true,
      yR: true,
    },
  },

  {
    name: 'left-bottom',
    styles: {
      bottom: '-5px',
      left: '-5px',
    },
    config: {
      left: true,
      top: false,
      xR: true,
      yR: true,
    },
  },
  {
    name: 'right-top',
    styles: {
      top: '-5px',
      right: '-5px',
    },
    config: {
      left: false,
      top: true,
      xR: true,
      yR: true,
    },
  },
  {
    name: 'right-bottom',
    styles: {
      bottom: '-5px',
      right: '-5px',
    },
    config: {
      left: false,
      top: false,
      xR: true,
      yR: true,
    },
  },
  // {
  // 	name: 'top-mid',
  // 	styles: {
  // 		top: '-5px',
  // 		left: '50%',
  // 		transform: 'translateX(-50%)',
  // 	},
  // 	config: {
  // 		left: false,
  // 		top: true,
  // 		xR: false,
  // 		yR: true
  // 	}
  // },
  // {
  // 	name: 'left-mid',
  // 	styles: {
  // 		left: '-5px',
  // 		top: '50%',
  // 		transform: 'translateY(-50%)',
  // 	},
  // 	config: {
  // 		left: true,
  // 		top: false,
  // 		xR: true,
  // 		yR: false
  // 	}
  // },
  // {
  // 	name: 'right-mid',
  // 	styles: {
  // 		right: '-5px',
  // 		top: '50%',
  // 		transform: 'translateY(-50%)',
  // 	},
  // 	config: {
  // 		left: false,
  // 		top: false,
  // 		xR: true,
  // 		yR: false
  // 	}
  // },
  {
    name: 'bottom-mid',
    styles: {
      bottom: '-5px',
      left: '50%',
      transform: 'translateX(-50%)',
    },
    config: {
      left: false,
      top: false,
      xR: false,
      yR: true,
    },
  },
  // {
  // 	name: 'rotate-link',
  // 	styles: {
  // 		position: ' absolute',
  // 		width: '1px',
  // 		height: '15px',
  // 		'background-color': '#1E88E5',
  // 		top: '-20px',
  // 		left: '50%',
  // 		transform: 'translateX(-50%)',
  // 		'z-index': '-1',

  // 	}
  // }
];

export const VIDEO_DOTS = [
  {
    name: 'rotate',
    styles: {
      top: 'calc(-50% - 20px)',
      left: 'calc(-50% - 20px)',
      transform: 'translateX(-50%)',
      width: '20px',
      height: '20px',
      backgroundImage:
        'url("https://findicons.com/files/icons/1620/crystal_project/16/rotate_ccw.png") 100% 100% !important',
      cursor:
        'url("https://findicons.com/files/icons/1620/crystal_project/16/rotate_ccw.png"), auto',
    },
  },
  {
    name: 'left-top',
    styles: {
      top: 'calc(-50% - 5px)',
      left: 'calc(-50% - 5px)',
    },
    config: {
      left: true,
      top: true,
      xR: true,
      yR: true,
    },
  },
  {
    name: 'left-bottom',
    styles: {
      top: 'calc(50% - 5px)',
      left: 'calc(-50% - 5px)',
    },
    config: {
      left: true,
      top: false,
      xR: true,
      yR: true,
    },
  },
  {
    name: 'right-top',
    styles: {
      top: 'calc(-50% - 5px)',
      right: 'calc(50% - 5px)',
    },
    config: {
      left: false,
      top: true,
      xR: true,
      yR: true,
    },
  },
  {
    name: 'right-bottom',
    styles: {
      top: 'calc(50% - 5px)',
      right: 'calc(50% - 5px)',
    },
    config: {
      left: false,
      top: false,
      xR: true,
      yR: true,
    },
  },
  // {
  // 	name: 'top-mid',
  // 	styles: {
  // 		top: 'calc(-50% - 5px)',
  // 		transform: 'translateX(-50%)',
  // 	},
  // 	config: {
  // 		left: false,
  // 		top: true,
  // 		xR: false,
  // 		yR: true
  // 	}
  // },
  // {
  // 	name: 'left-mid',
  // 	styles: {
  // 		left: 'calc(-50% - 5px)',
  // 		top: '0%',
  // 		transform: 'translateY(-50%)',
  // 	},
  // 	config: {
  // 		left: true,
  // 		top: false,
  // 		xR: true,
  // 		yR: false
  // 	}
  // },
  // {
  // 	name: 'right-mid',
  // 	styles: {
  // 		right: 'calc(50% - 5px)',
  // 		top: 'calc(0% - 5px)',
  // 		transform: 'translateY(-50%)',
  // 	},
  // 	config: {
  // 		left: false,
  // 		top: false,
  // 		xR: true,
  // 		yR: false
  // 	}
  // },
  {
    name: 'bottom-mid',
    styles: {
      top: 'calc(50% - 5px)',
      transform: 'translateX(-50%)',
    },
    config: {
      left: false,
      top: false,
      xR: false,
      yR: true,
    },
  },
  // {
  // 	name: 'rotate-link',
  // 	styles: {
  // 		position: ' absolute',
  // 		width: '1px',
  // 		height: '15px',
  // 		'background-color': '#1E88E5',
  // 		top: 'calc(-50% - 25px)',
  // 		left: '0px',
  // 		transform: 'translateX(-50%)',
  // 		'z-index': '-1',

  // 	}
  // }
];

export const SECTION_DOTS = [
  {
    name: 'top-mid',
    styles: {
      top: '-5px',
      left: 'calc(50% - 5px)',
      clear: 'left',
    },
    config: {
      left: false,
      top: true,
      xR: false,
      yR: true,
    },
  },
  {
    name: 'bottom-mid',
    styles: {
      bottom: '-5px',
      left: 'calc(50% - 5px)',
    },
    config: {
      left: false,
      top: false,
      xR: false,
      yR: true,
    },
  },
];

export const COMMON_DOTS_STYLE = `
	height: 10px;
	width: 10px;
	background-color: white;
	position: absolute;
	border: 1px solid var(--primary);
	user-select: none;
	pointer-events: all !important;
	touch-action: auto;
`;

export const WRAPPER_JSON: IHTMLElement = {
  tag: 'div',
  attributes: {
    styles: [
      {
        key: 'width',
        value: 'auto-fit',
      },
      {
        key: 'position',
        value: 'absolute',
      },
      {
        key: 'user-select',
        value: 'none',
      },
    ],
    dataset: [
      {
        key: 'type',
        value: 'wrapper',
      },
    ],
  },
};