import { css, html } from 'lit'
import { property } from 'lit/decorators.js'
import { when } from 'lit/directives/when.js'
import { UsBaseElement } from '../../components/base/UsBaseElement'
import { customElementIfNotExist } from '../../utils/customElementIfNotExist'
import type { ICarouselItem } from './model/IIntroCarouselData'
import type { IIntroScreen } from './model/IIntroScreen'
import style_css from './styles.pcss'

import '../../components/button/UsButton'
import '../../components/carousel/UsСarousel'
import '../../components/policy/UsPolicy'
import '../../layouts/scrollLayout/ScrollLayout'
import '../../components/footer/UsFooter'

declare global {
  interface HTMLElementTagNameMap {
    'us-intro-screen': USIntroScreen
  }
}

@customElementIfNotExist('us-intro-screen')
export class USIntroScreen extends UsBaseElement implements IIntroScreen {
  static styles = [
    UsBaseElement.styles,
    css([style_css] as TemplateStringsArray | any),
  ]

  @property({ type: String }) termsUrl = ''
  @property({ type: String }) privacyPolicyUrl = ''
  @property({ type: String }) widgetView: IIntroScreen['widgetView'] = 'vertical'
  @property({ type: String }) locale!: string
  @property({ type: Boolean }) autoSlide = false
  @property({ type: Boolean }) hidePolicy = false
  @property({ type: Array }) introtext: ICarouselItem[] = []
  @property({ type: String }) introctatext = ''

  touchStartX = 0
  touchStartY = 0
  mouseStartX = 0
  dragging = false

  async connectedCallback() {
    super.connectedCallback()

    this.addEventListener('touchstart', this.handleTouchStart)
    this.addEventListener('touchend', this.handleTouchEnd)

    this.addEventListener('mousedown', this.handleMouseDown)
    this.addEventListener('mouseup', this.handleMouseUp)
  }

  disconnectedCallback() {
    super.disconnectedCallback()

    this.removeEventListener('touchstart', this.handleTouchStart)
    this.removeEventListener('touchend', this.handleTouchEnd)

    this.removeEventListener('mousedown', this.handleMouseDown)
    this.removeEventListener('mouseup', this.handleMouseUp)
  }

  handleTouchStart = (event: TouchEvent) => {
    event.stopPropagation()

    this.touchStartX = event.touches[0].clientX
    this.touchStartY = event.touches[0].clientY
    this.dragging = true
  }

  handleTouchEnd = (event: TouchEvent) => {
    if (!this.dragging)
      return

    event.stopPropagation()

    const touchEndX = event.changedTouches[0].clientX
    const touchDifferenceX = touchEndX - this.touchStartX

    const minSwipeDistance = 30

    if (Math.abs(touchDifferenceX) > minSwipeDistance) {
      if (touchDifferenceX > 0)
        this.prevSlide()
      else
        this.nextSlide()
    }

    this.dragging = false
  }

  handleMouseDown = (event: MouseEvent) => {
    event.stopPropagation()

    this.dragging = true
    this.mouseStartX = event.clientX
  }

  handleMouseUp = (event: MouseEvent) => {
    if (!this.dragging)
      return

    event.stopPropagation()

    const mouseEndX = event.clientX
    const mouseDifference = this.mouseStartX - mouseEndX

    const minSwipeDistance = 30

    if (Math.abs(mouseDifference) > minSwipeDistance) {
      if (mouseDifference > 0)
        this.nextSlide()
      else
        this.prevSlide()
    }

    this.dragging = false
  }

  render() {
    return html`
      <div class="introscreen ${this.widgetView}">
        <us-scroll-layout>
          <div class="introscreen-wrapper">
            <div class="introscreen-body">
              <us-carousel 
                .widgetView="${this.widgetView}"
                ?autoSlide=${this.autoSlide}
                item-offset="${this.widgetFormatView()}"
                .items=${this.introtext}
              >
                ${this.introtext.map((item, index) => html`
                  <us-carousel-item>
                    <div class="carousel-item">
                      <div class="slide-screen">
                        <slot name=${`img-${index + 1}`}></slot>
                      </div>
                      <div class="title-and-descripton-wrapper">
                        <h3 class="title">${item?.title}</h3>
                        <span class="descripton">${item?.text}</span>
                      </div>
                    </div>
                  </us-carousel-item>
                `)}
              </us-carousel>
            </div>
          </div>
        </us-scroll-layout>
        <div class="introscreen__footer">
          <us-footer
            class="footer-element"
            .widgetView="${this.widgetView}"
            .primaryButtonLabel=${this.introctatext}
            variant='default'
            ?showPrimaryButton=${true}
            ?showContentSlot=${!this.hidePolicy}
            @primaryButtonClick="${this.dispatchActionEvent}"
          >
            ${when(!this.hidePolicy, () => html`
              <us-policy 
                class="policy-element"
                policy=${this.privacyPolicyUrl}
                terms=${this.termsUrl}
                buttonName="${this.introctatext}"
                target="_blank"
                textAlign="${this.isWidgetViewVertical() ? 'center' : 'left'}"
              ></us-policy>
            `)}
          </us-footer>
        </div>
      </div>
    `
  }

  dispatchActionEvent() {
    const event = new CustomEvent('action')
    this.dispatchEvent(event)
  }

  isWidgetViewVertical() {
    return this.widgetView.includes('vertical')
  }

  prevSlide() {
    const carousel = this.shadowRoot?.querySelector('us-carousel')
    if (carousel)
      carousel.moveLeftLoop()
  }

  nextSlide() {
    const carousel = this.shadowRoot?.querySelector('us-carousel')
    if (carousel)
      carousel.moveRightLoop()
  }

  widgetFormatView() {
    const views = this.widgetView.split(' ')

    if (views.includes('vertical-narrow') && views.includes('vertical') && views.includes('big-format'))
      return 280
    else if (views.includes('vertical') && views.includes('big-format'))
      return 344
    else if (views.includes('big-format') && !views.includes('horizontal-small'))
      return 600
    else if (views.includes('horizontal-large'))
      return 928
    else if (views.includes('horizontal-medium'))
      return 688
    else if (views.includes('horizontal-small'))
      return 480
    else if (views.includes('vertical-narrow'))
      return 280
    else if (views.includes('vertical'))
      return 344

    return 0
  }
}