import * as React from 'react'

const gap = `2px`

const path = [
  // first point is top left x,y
  // others continue clockwise
  `${gap} ${gap}`,
  `100% ${gap}`,
  `100% var(--slug-minus-bleed)`,
  `var(--slug-minus-bleed) var(--slug-minus-bleed)`,
  `var(--slug-minus-bleed) 100%`,
  `${gap} 100%`,
].join(`, `)

const clipPath = `polygon(${path})`

const CropMark = ({style = {}, ...props}) => {
  /* NOTE: `no-freeze` class EXCLUDES this element from the freezeStyles script that makes media queries work by inlining computed styles. This element needs to be excluded so that its size can change to match the --slug-area size AFTER freezeStyles has run */
  return (
    <div
      className="no-freeze"
      style={{
        '--slug-minus-bleed': `calc(var(--slug-area) - var(--bleed) - ${gap})`,
        position: `absolute`,
        border: `thin solid #000`,
        height: `var(--slug-area)`,
        width: `var(--slug-area)`,
        zIndex: `-1`,
        clipPath,
        ...style,
      }}
      {...props}
    />
  )
}

/**
 *
 * @internal
 */
export const CropMarks = () => {
  return (
    <>
      <CropMark />
      <CropMark
        style={{
          right: `0`,
          transform: `rotate(90deg)`,
        }}
      />
      <CropMark
        style={{
          right: `0`,
          bottom: `0`,
          transform: `rotate(180deg)`,
        }}
      />
      <CropMark
        style={{
          bottom: `0`,
          transform: `rotate(270deg)`,
        }}
      />
    </>
  )
}

export default CropMarks