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

const MarkupStyle: Record<string, unknown> = {
  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, number>;
  bdcolor: string;
  markupType: string;
  opacity: number;
  isCovered?: boolean;
  scale: number;
}>`
  position: absolute;
  cursor: pointer;
  opacity: ${(props) => props.opacity};

  ${(props) => css`
    top: ${props.position.top}px;
    left: ${props.position.left}px;
    width: ${props.position.width}px;
    height: ${props.position.height}px;
  `}

  ${(props) => MarkupStyle[props.markupType] as string}
`;

export default Markup;