import { css, html, svg } from 'lit'
import { property, state } from 'lit/decorators.js'
import type { DirectiveResult } from 'lit/directive'
import type { ClassMapDirective } from 'lit/directives/class-map.js'
import { classMap } from 'lit/directives/class-map.js'
import type { Ref } from 'lit/directives/ref.js'
import { createRef, ref } from 'lit/directives/ref.js'
import { when } from 'lit/directives/when.js'
import { customElementIfNotExist } from '../../utils/customElementIfNotExist'
import { UsBaseElement } from '../base/UsBaseElement'
import UsLoader_css from './loader.pcss'
import vars_css from './vars.pcss'
import type { ILoaderCircle, ILoaderProps, TLoaderTypeProp } from './model/ILoaderProps'

declare global {
  interface HTMLElementTagNameMap {
    'us-loader': UsLoader
  }
}

@customElementIfNotExist('us-loader')
export class UsLoader extends UsBaseElement implements ILoaderProps {
  static styles = [
    UsBaseElement.styles,
    css([vars_css] as TemplateStringsArray | any),
    css([UsLoader_css] as TemplateStringsArray | any),
  ]

  @property() type: TLoaderTypeProp = 'infinity'
  @property({ type: Number }) value = 0
  @property({ type: Boolean }) showPercentages = false
  @property() label = ''
  @property() doneLabel = ''
  @property() loaderBackgroundColor = 'transparent'
  @property({ type: Number }) circleLoaderDaimeter = 64
  @property({ type: Number }) circleLoaderStroke = 8
  @property({ type: Number }) workTime: number | null = null
  @property({ type: String, attribute: 'data-testid', reflect: true })
    dataTestId = 'loader'

  @state() isDone = false
  @state() displayedLabel: any
  @state() linearProgressBarLabel = ''
  @state() displayedLabelText = ''
  @state() loaderStrokeWidthBig = 8
  @state() loaderStrokeWidthSmall = 4
  @state() lengthCompensation = 5
  @state() defaultProgressBarLength = '30%'
  @state()
    circle_1: ILoaderCircle = {
      circleDaimeter: this.circleLoaderDaimeter,
      strokeWidth: this.circleLoaderStroke,
      radius: 0,
      strokeDasharray: 0,
      strokeDashoffset: 0,
    }

  @state()
    circle_2: ILoaderCircle = {
      circleDaimeter: this.circleLoaderDaimeter,
      strokeWidth: this.circleLoaderStroke,
      radius: 0,
      strokeDasharray: 0,
      strokeDashoffset: 0,
    }

  checkedMark = svg`
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M26.0594 8.94016C26.6453 9.52609 26.6453 10.473 26.0594 11.0589L14.0594 23.0589C13.4734 23.6448 12.5266 23.6448 11.9406 23.0589L5.93931 17.0589C5.35356 16.473 5.35356 15.5261 5.93931 14.9402C6.52516 14.3542 7.47484 14.3542 8.06078 14.9402L12.9578 19.8761L23.9406 8.94016C24.5266 8.35328 25.4734 8.35328 26.0594 8.94016Z" fill="var(--color-primary-600)"/>
    </svg>
  `
  circleRef: Ref<SVGElement> = createRef()

  willUpdate(changedProperties: Map<string, unknown>) {
    if (changedProperties.has('type')
      || changedProperties.has('circleLoaderDaimeter')
      || changedProperties.has('circleLoaderStroke'))
      this.updatedType()

    if (changedProperties.has('workTime'))
      this.updatedWorkTime()

    if (changedProperties.has('value'))
      this.updatedValue()

    this.updateLabel()
    this.updateLabelText()
    this.updateLinearLoaderLabel()
  }

  firstUpdated() {
    this.updatedWorkTime()
  }

  render() {
    switch (this.type) {
      case 'infinity-scroll':
        return this.getInfinityScrollLoader()
      case 'linear-progress-bar-big':
      case 'linear-progress-bar-small':
        return this.getLinearLoader()
      default:
        return this.getPrimaryLoader()
    }
  }

  getLoader() {
    const loaderSize = this.circle_1.circleDaimeter
    const cxy = loaderSize / 2

    return html`
      ${svg`
        <svg
          class=${this.getLoaderContainerClasses()}
          width=${loaderSize}
          height=${loaderSize}
          viewbox=${`0 0 ${loaderSize} ${loaderSize}`}
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle
            class="bar-bg"
            cx=${cxy}
            cy=${cxy}
            r=${this.circle_2.radius}
            stroke-width=${this.circle_2.strokeWidth}
            stroke-dasharray=${this.circle_2.strokeDasharray}
            stroke-dashoffset=${this.circle_2.strokeDasharray}px
          />
          <circle
            ${ref(this.circleRef)}
            class="bar"
            cx=${cxy}
            cy=${cxy}
            r=${this.circle_1.radius}
            stroke-width=${this.circle_1.strokeWidth}
            stroke-dasharray=${this.circle_1.strokeDasharray}
            stroke-dashoffset=${this.circle_1.strokeDashoffset}px
          />
        </svg>
      `}
    `
  }

  getLinearLoader() {
    const resultProgressBarLength = this.value
      ? `calc(${this.value}% + ${this.lengthCompensation}px)`
      : this.defaultProgressBarLength

    return html`
      <div class="${this.getLinearLoaderClasses()}" style="background-color: ${this.loaderBackgroundColor}">
        <div class="loader__progress-bar-wrapper">
          <div
          class="${this.getLoaderTickerAnimationClasses()}"
          style="width: ${resultProgressBarLength}; transform: translateX(-${this.lengthCompensation}px);"></div>
        </div>
        ${when(this.label || this.value,
          () => html`
              <p class="loader__linear-label">
                ${this.linearProgressBarLabel}
              </p>
            `,
        )}
      </div>
    `
  }

  getInfinityScrollLoader() {
    return html`
      <div class="loader loader_infinity-scroll" style="background-color: ${this.loaderBackgroundColor}">
        ${this.getLoader()}
        ${when(!!this.label, () => html`
          <span class="loader__label">
            ${this.label}
          </span>
        `)}
      </div>
    `
  }

  getPrimaryLoader() {
    return html`
      <div class="loader-wrapper">
        <div class="loader" style="background-color: ${this.loaderBackgroundColor}">
          ${this.getLoader()}
          <span class="label">
            ${this.displayedLabel}
          </span>
        </div>
        ${when(!!this.displayedLabelText, () => html`
          <span class="label__text">
            ${this.displayedLabelText}
          </span>
        `)}
      </div>
    `
  }

  completeFilling(element: SVGElement, radius: number, value: number) {
    if (!this.workTime)
      return

    const dasharray = this.calcStrokeDasharray(radius)
    const dashoffset = this.calcStrokeDashoffset(value, dasharray)
    element.style.setProperty('--stroke-min', `${dasharray}px`)
    element.style.setProperty('--stroke-max', `${dashoffset}px`)

    element.style.animation = `filling ${this.workTime / 1000}s linear`
    const setDoneState = () => {
      this.value = 100
    }

    const options = { once: true }
    element.addEventListener('animationend', setDoneState, options)
  }

  updatedWorkTime() {
    const circle = this.circleRef.value
    if (!circle || !this.workTime)
      return

    const circleOneRadius = this.circle_1.radius
    return this.completeFilling(circle, circleOneRadius, this.value)
  }

  updatedType() {
    if (this.type === 'infinity' || this.type === 'infinity-scroll') {
      this.value = 25
      this.circle_1.strokeDashoffset = this.calcStrokeDashoffset(this.value, this.circle_1.strokeDasharray)
    }

    if (this.type === 'infinity-scroll') {
      this.circle_1 = this.circle_2 = this.recalcCircleParams(24, this.loaderStrokeWidthSmall)
    } else {
      this.circle_1 = this.recalcCircleParams(this.circleLoaderDaimeter, this.circleLoaderStroke)
      this.circle_2 = this.recalcCircleParams(this.circleLoaderDaimeter, this.circleLoaderStroke)
    }
  }

  updatedValue() {
    this.isDone = this.value >= 100
    this.value = this.value > 100 ? 100 : this.value
    this.circle_1.strokeDashoffset = this.calcStrokeDashoffset(this.value, this.circle_1.strokeDasharray)

    if (this.isDone) {
      setTimeout(() => {
        this.dispatchEvent(new CustomEvent('done'))
      }, 500)
    }
  }

  updateLabel() {
    if (this.showPercentages && !this.isDone)
      this.displayedLabel = `${this.value}%`
    else if (this.isDone)
      this.displayedLabel = this.checkedMark
  }

  updateLabelText() {
    this.displayedLabelText = this.isDone ? this.doneLabel : this.label
  }

  updateLinearLoaderLabel() {
    if (this.value)
      this.linearProgressBarLabel = `${this.value}%${this.value < 100 ? '...' : ''}`
    else
      this.linearProgressBarLabel = this.label
  }

  recalcCircleParams(circleDaimeter: number, strokeWidth: number): ILoaderCircle {
    const radius = this.calcRadius(circleDaimeter, strokeWidth)
    const strokeDasharray = this.calcStrokeDasharray(radius)
    const strokeDashoffset = this.calcStrokeDashoffset(this.value, strokeDasharray)

    return { circleDaimeter, strokeWidth, radius, strokeDasharray, strokeDashoffset }
  }

  calcRadius(circleDaimeter: number, strokeWidth: number): number {
    return circleDaimeter / 2 - strokeWidth / 2
  }

  calcStrokeDasharray(radius: number): number {
    const strokeDasharray = Math.PI * radius * 2
    return Math.round(strokeDasharray * 100) / 100
  }

  calcStrokeDashoffset(value: number, strokeDasharray: number): number {
    const currentValue = (value !== undefined && value !== null) ? value : 100
    const strokeDashoffset = ((100 - currentValue) / 100) * strokeDasharray

    return Math.round(strokeDashoffset * 100) / 100
  }

  getLoaderContainerClasses(): DirectiveResult<typeof ClassMapDirective> {
    return classMap({
      'loader-container': true,
      'rotation-animation': this.type === 'infinity' || this.type === 'infinity-scroll',
    })
  }

  getLinearLoaderClasses(): DirectiveResult<typeof ClassMapDirective> {
    return classMap({
      'loader__linear-loader-container': true,
      'loader__linear-loader-container_big-progress-bar': this.type === 'linear-progress-bar-big',
      'loader__linear-loader-container_small-progress-bar': this.type === 'linear-progress-bar-small',
    })
  }

  getLoaderTickerAnimationClasses(): DirectiveResult<typeof ClassMapDirective> {
    return classMap({
      'progress-bar-fill': true,
      'progress-bar-fill-animation': (this.label && !this.value) || (!this.label && !this.value),
    })
  }
}