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; scale: number }>`
    border-bottom: ${props => props.scale * 2}px 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; scale: number }>`
    &:after {
      content: '';
      position: absolute;
      height: ${props => props.scale * 2}px;
      width: 100%;
      left: 0;
      top: 40%;
      background-color: ${props =>
        props.isCovered ? '#297fb8' : props.bdcolor};
    }
  `,
};

const Markup = styled('div')<{
  position: Record<string, any>;
  bdcolor: string;
  markupType: string;
  opacity: number;
  isCovered?: boolean;
  scale: number;
}>`
  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]}
`;

export default Markup;