import styled, { css } from 'styled-components';

const MarkupStyle: Record<string, any> = {
  Highlight: css<{isCovered: boolean; bdcolor: string}>`
    background-color: ${props => (props.isCovered ? '#297fb8' : props.bdcolor)};
  `,
  Underline: css<{isCovered: boolean; bdcolor: string}>`
    border-bottom: 2px solid ${props => (props.isCovered ? '#297fb8' : props.bdcolor)};
  `,
  Squiggly: css<{isCovered: boolean; bdcolor: string}>`
    overflow: hidden;
    
    &:before {
      content: '';
      position: absolute;
      background: radial-gradient(ellipse, transparent, transparent 8px, ${props => (props.isCovered ? '#297fb8' : props.bdcolor)} 9px, ${props => (props.isCovered ? '#297fb8' : props.bdcolor)} 10px, transparent 11px);
      background-size: 22px 26px;
      width: 100%;
      height: 5px;
      left: 0;
      bottom: 2px;
    }
    &:after {
      content: '';
      position: absolute;
      background: radial-gradient(ellipse, transparent, transparent 8px, ${props => (props.isCovered ? '#297fb8' : props.bdcolor)} 9px, ${props => (props.isCovered ? '#297fb8' : props.bdcolor)} 10px, transparent 11px);
      background-size: 22px 26px;
      width: 100%;
      height: 5px;
      bottom: -1px;
      left: 11px;
      background-position: 0px -22px;
    }
  `,
  StrikeOut: css<{isCovered: boolean; bdcolor: string}>`
    &:after {
      content: '';
      position: absolute;
      height: 2px;
      width: 100%;
      left: 0;
      top: 40%;
      background-color: ${props => (props.isCovered ? '#297fb8' : props.bdcolor)};
    };
  `,
};

export const Markup = styled('div')<{position: Record<string, any>; bdcolor: string; markupType: string; opacity: number; isCovered?: boolean}>`
  position: absolute;
  cursor: pointer;
  opacity: ${props => props.opacity};

  ${props => css`
    top: ${props.position.top};
    left: ${props.position.left};
    width: ${props.position.width};
    height: ${props.position.height};
  `}
  ${props => MarkupStyle[props.markupType]}
`;