import React from 'react'
import { Button, Row } from 'antd'

import { Pill } from 'components/Pill'
import { Paragraph } from 'components/Typography'

import moment from 'moment-timezone'

import { MultistageModalCompletionStageProps } from 'components/MultistageForm/MultistageModalCompletionStage'

import '../PreReleaseModal.scss'
import './SmartItemCompletionModal.scss'

import { MusicReleaseScope } from '@komi-app/shared-types'

export interface SmartItemCompletionModalProps
  extends MultistageModalCompletionStageProps {
  artistName: string
  isTemporary: boolean
  photoUrl: string
  releaseDate: string
  releaseScope: MusicReleaseScope
  songName: string
  timezone: string
}

export const SmartItemCompletionModal: React.FC<
  SmartItemCompletionModalProps
> = ({
  artistName,
  isTemporary,
  photoUrl,
  releaseDate,
  releaseScope,
  songName,
  timezone,
  onCancel
}) => {
  const releaseDateMoment =
    releaseScope === MusicReleaseScope.GLOBAL
      ? moment(releaseDate).tz(timezone)
      : moment.utc(releaseDate)
  const reminderDateMoment =
    releaseScope === MusicReleaseScope.GLOBAL
      ? moment(releaseDate).tz(timezone)
      : moment.utc(releaseDate)

  const formattedReleaseDate = React.useMemo(
    () => releaseDateMoment.format('LL'),
    [releaseDateMoment]
  )
  const formattedReleaseTime = React.useMemo(
    () => releaseDateMoment.format('LT'),
    [releaseDateMoment]
  )

  const reminderDate = React.useMemo(
    () => reminderDateMoment.clone().subtract({ days: 7 }),
    [releaseDateMoment]
  )
  const formattedReminderDate = React.useMemo(
    () => reminderDate.format('LL'),
    [releaseDate]
  )

  const releaseMessage = React.useMemo(
    () =>
      timezone
        ? moment.tz(releaseDateMoment, timezone).zoneAbbr()
        : 'local time',
    [releaseDateMoment, timezone]
  )

  return (
    <div className="prerelease-complete">
      <Row className="prerelease-complete--header">
        <div className="prerelease-complete--header-section">
          <img className="prerelease-complete--header-image" src={photoUrl} />
        </div>

        <div className="prerelease-complete--header-section__row">
          <span className="prerelease-complete--header-title">
            {songName}
            <Pill
              text="Pre-save"
              className="prerelease-complete--header-pill"
            />
          </span>

          <Paragraph className="prerelease-complete--header-subtitle">
            {artistName}
          </Paragraph>
        </div>
      </Row>

      <div className="prerelease-complete--body">
        <Paragraph className="prerelease-complete--body-title">
          Congratulations! You have created a Pre-Release Smart Link
        </Paragraph>

        <Paragraph className="prerelease-complete--body-paragraph">
          Your music will be added to the library of your fans on{' '}
          <span className="fw-600">{formattedReleaseDate}</span> at{' '}
          <span className="fw-600">
            {formattedReleaseTime} {releaseMessage}
          </span>
          .
        </Paragraph>

        {isTemporary && (
          <Paragraph className="prerelease-complete--body-paragraph">
            Since you entered a temporary Pre-Release Link, we will send an
            email on <span className="fw-600">{formattedReminderDate}</span> to
            remind you to swap it for the correct link.
          </Paragraph>
        )}

        <Paragraph className="prerelease-complete--body-paragraph">
          At the time of release, this Pre-Release Smart Link on your Komi
          profile will be converted to a Smart Link using the links provided at
          the time of release.
        </Paragraph>
      </div>

      <div className="prerelease-complete--controls">
        <Button
          className="ant-btn-xl ant-btn-uppercase"
          size="large"
          type="primary"
          htmlType="submit"
          onClick={onCancel}
        >
          Done
        </Button>
      </div>
    </div>
  )
}
