import { error } from 'fp-ts/lib/Console'
import { pipe } from 'fp-ts/lib/pipeable'
import * as R from 'fp-ts-contrib/lib/ReaderIO'
import * as C from 'graphics-ts/lib/Canvas'
import * as Color from 'graphics-ts/lib/Color'
import * as S from 'graphics-ts/lib/Shape'

const canvasId = 'canvas'

const triangle: C.Render<void> = C.fillPath(
  pipe(
    C.setFillStyle(pipe(Color.black, Color.toCss)),
    R.chain(() => C.moveTo(S.point(75, 50))),
    R.chain(() => C.lineTo(S.point(100, 75))),
    R.chain(() => C.lineTo(S.point(100, 25)))
  )
)

C.renderTo(canvasId, () => error(`[ERROR]: Unable to find canvas with id ${canvasId}`))(triangle)()

import { error } from 'fp-ts/lib/Console'
import * as RA from 'fp-ts/lib/ReadonlyArray'
import * as C from 'graphics-ts/lib/Canvas'
import * as Color from 'graphics-ts/lib/Color'
import * as D from 'graphics-ts/lib/Drawing'
import * as S from 'graphics-ts/lib/Shape'

const canvasId = 'canvas'

const triangle: C.Render<void> = D.render(
  D.fill(S.path(RA.readonlyArray)([S.point(75, 50), S.point(100, 75), S.point(100, 25)]), D.fillStyle(Color.black))
)

C.renderTo(canvasId, () => error(`[ERROR]: Unable to find canvas with id ${canvasId}`))(triangle)()

export declare const render: (drawing: Drawing) => C.Render<CanvasRenderingContext2D>

export declare const renderShape: (shape: Shape) => C.Render<CanvasRenderingContext2D>

export declare const clipped: (shape: Shape, drawing: Drawing) => Drawing

export declare const fill: (shape: Shape, style: FillStyle) => Drawing

export declare const fillStyle: (color: Color) => FillStyle

export declare const lineWidth: (lineWidth: number) => OutlineStyle

export declare const many: (drawings: readonly Drawing[]) => Drawing

export declare const outline: (shape: Shape, style: OutlineStyle) => Drawing

export declare const outlineColor: (color: Color) => OutlineStyle

export declare const rotate: (angle: number, drawing: Drawing) => Drawing

export declare const scale: (scaleX: number, scaleY: number, drawing: Drawing) => Drawing

export declare const shadowBlur: (blurRadius: number) => Shadow

export declare const shadowColor: (color: Color) => Shadow

export declare const shadowOffset: (offsetPoint: Point) => Shadow

export declare const text: (font: Font, x: number, y: number, style: FillStyle, text: string) => Drawing

export declare const translate: (translateX: number, translateY: number, drawing: Drawing) => Drawing

export declare const withShadow: (shadow: Shadow, drawing: Drawing) => Drawing

export declare const monoidDrawing: M.Monoid<Drawing>

export declare const monoidFillStyle: M.Monoid<FillStyle>

export declare const monoidOutlineStyle: M.Monoid<OutlineStyle>

import * as O from 'fp-ts/lib/Option'
import * as M from 'fp-ts/lib/Monoid'
import * as Color from 'graphics-ts/lib/Color'
import * as D from 'graphics-ts/lib/Drawing'

assert.deepStrictEqual(
  M.fold(D.monoidOutlineStyle)([D.outlineColor(Color.black), D.outlineColor(Color.white), D.lineWidth(5)]),
  {
    color: O.some(Color.black),
    lineWidth: O.some(5),
  }
)

export declare const monoidShadow: M.Monoid<Shadow>

export interface Clipped {
  readonly _tag: 'Clipped'

  /**
   * The shape to use for clipping.
   */
  readonly shape: Shape

  /**
   * The drawing to be clipped.
   */
  readonly drawing: Drawing
}

export type Drawing = Clipped | Fill | Outline | Many | Rotate | Scale | Text | Translate | WithShadow

export interface Fill {
  readonly _tag: 'Fill'

  /**
   * The filled `Shape`.
   */
  readonly shape: Shape

  /**
   * The fill style applied to the `Shape`.
   */
  readonly style: FillStyle
}

export interface FillStyle {
  /**
   * The fill color.
   */
  readonly color: O.Option<Color>
}

export interface Many {
  readonly _tag: 'Many'

  /**
   * The collection of drawings.
   */
  readonly drawings: ReadonlyArray<Drawing>
}

export interface Outline {
  readonly _tag: 'Outline'

  /**
   * The outlined `Shape`.
   */
  readonly shape: Shape

  /**
   * The outline style applied to the `Shape`.
   */
  readonly style: OutlineStyle
}

export interface OutlineStyle {
  /**
   * The outline color.
   */
  readonly color: O.Option<Color>

  /**
   * The outline line width.
   */
  readonly lineWidth: O.Option<number>
}

export interface Rotate {
  readonly _tag: 'Rotate'

  /**
   * The angle of rotation.
   */
  readonly angle: number

  /**
   * The drawing to be rotated.
   */
  readonly drawing: Drawing
}

export interface Scale {
  readonly _tag: 'Scale'

  /**
   * The x-axis scale.
   */
  readonly scaleX: number

  /**
   * The y-axis scale.
   */
  readonly scaleY: number

  /**
   * The drawing to be scaled.
   */
  readonly drawing: Drawing
}

export interface Shadow {
  /**
   * The shadow color.
   */
  readonly color: O.Option<Color>

  /**
   * The shadow blur radius.
   */
  readonly blur: O.Option<number>

  /**
   * The shadow offset.
   */
  readonly offset: O.Option<Point>
}

export interface Text {
  readonly _tag: 'Text'

  /**
   * The font style applied to the text.
   */
  readonly font: Font

  /**
   * The x-axis coordinate at which to begin drawing the text.
   */
  readonly x: number

  /**
   * The y-axis coordinate at which to begin drawing the text.
   */
  readonly y: number

  /**
   * The fill style applied to the text.
   */
  readonly style: FillStyle

  /**
   * The HTML text string.
   */
  readonly text: string
}

export interface Translate {
  readonly _tag: 'Translate'

  /**
   * The x-axis translation.
   */
  readonly translateX: number

  /**
   * The y-axis translation.
   */
  readonly translateY: number

  /**
   * The drawing to be translated.
   */
  readonly drawing: Drawing
}

export interface WithShadow {
  readonly _tag: 'WithShadow'

  /**
   * The shadow to be applied.
   */
  readonly shadow: Shadow

  /**
   * The drawing to be shadowed.
   */
  readonly drawing: Drawing
}