import * as React from 'react'
import { groupBy } from 'lodash'
import * as moment from 'moment'
import * as momentTimezone from 'moment-timezone'
import * as humanize from '../../utils/humanize'

const styles = (...styles: object[]) => Object.assign({}, ...styles)

const linkStyle = {
  cursor: 'pointer',
  textDecoration: 'none',
  color: '#0176FF',
}

const fontFamily = `'Helvetica', 'Arial', sans-serif`

const Column = ({ children, style, ...rest }: any): JSX.Element =>
  <td style={styles({ fontFamily, verticalAlign: 'top'  }, style)} {...rest}>
    {children}
  </td>

const Row = ({ children, style, ...rest }: any): JSX.Element =>
  <table style={styles({ borderSpacing: 0, width: '100%', minWidth: '100%' }, style)} {...rest}>
    <tr>
      {children}
    </tr>
  </table>

const MeetingHeader = ({ children }: any): JSX.Element => {
  const style = { paddingBottom: '10px' }

  return (
    <Row>
      <Column style={style}>
        {children}
      </Column>
    </Row>
  )
}

const MeetingFooter = ({ calendarUrl }: any): JSX.Element => {
  const style = {
    textAlign: 'center',
    fontSize: '12px',
  }

  return (
    <Row>
      <Column>
        <Row>
          <Column style={styles(style, { paddingBottom: '14px' })}>
            Don’t see a time that works? <a style={styles(linkStyle, { textDecoration: 'underline' })} href={calendarUrl}>Grab another time on my calendar</a>
          </Column>
        </Row>
        <Row>
          <Column style={styles(style, { color: '#7695A5' })}>
            {/* https://s3.amazonaws.com/drift-prod-static/assets/bolt-img.png is a hosted version of bolt-img.png */}
            Meetings <img style={{ padding: '0 3px', height: '14px', verticalAlign: 'bottom' }} src="https://s3.amazonaws.com/drift-prod-static/assets/bolt-img.png" /> by <a style={linkStyle} href={'https://www.drift.com/profiles/'}>Drift</a>
          </Column>
        </Row>
      </Column>
    </Row>
  )
}

interface IMeetingNameProps {
  name: string,
}

const MeetingName = ({ name }: IMeetingNameProps): JSX.Element => {
  const style = {
    fontWeight: 'bold',
    fontSize: '16px',
  } as React.CSSProperties

  return <span style={style}>{name}</span>
}

const computeAvailabilitySlotsByDate = (slots: number[], timezone: string) => {
  return groupBy(slots, slot => momentTimezone.tz(slot, timezone).startOf('day').valueOf())
}

interface IMeetingTimesProps {
  meetingBaseUrl: string,
  meetingTimes: number[],
  meetingDuration: number,
  timezone: string,
}

const MeetingTime = ({ scheduleTimeUrl, meetingTime, meetingDuration, displayTimezone }: any): JSX.Element => {
  const startTime = moment(new Date(meetingTime)).tz(displayTimezone)
  const endTime = moment(startTime).add(meetingDuration, 'minutes')

  const isCrossMeridiem = (startTime.format('a') !== endTime.format('a'))
  const startTimeString = isCrossMeridiem ? startTime.format('h:mma').slice(0, -1) : startTime.format('h:mm')
  const endTimeString = endTime.format('h:mma').slice(0, -1)

  const style = {
    paddingTop: '8px',
    paddingBottom: '8px',
    background: '#FAFBFC',
    fontWeight: 'bold',
    border: '1px solid #B5D2E1',
    borderRadius: '3px',
    textAlign: 'center',
  }

  return (
    <Row style={{ marginBottom: '5px' }}>
      <Column>
        <Row style={{ borderCollapse: 'separate' }}>
          <Column style={style}>
            <a style={styles(linkStyle, { color: '#394F5A' })} href={scheduleTimeUrl}>{startTimeString} – {endTimeString}</a>
          </Column>
        </Row>
      </Column>
    </Row>
  )
}

const SwimlaneHeader = ({ children }: any): JSX.Element => {
  const style = {
    fontWeight: 'bold',
    paddingTop: '8px',
    paddingBottom: '4px',
    textAlign: 'center',
  }

  return (
    <Row>
      <Column style={{ paddingBottom: '4px' }}>
        <Row>
          <Column style={style}>
            {children}
          </Column>
        </Row>
      </Column>
    </Row>
  )
}

const MeetingDateSwimlane = ({ children, meetingDate, displayTimezone, isLast }: any): JSX.Element => {
  const style = isLast ? {} : { paddingRight: '14px' }

  return (
    <Column style={styles(style, { width: '33%', minWidth: '33%' })}>
      <SwimlaneHeader>
        {moment(new Date(meetingDate)).tz(displayTimezone).format('ddd, MMM D')}
      </SwimlaneHeader>
      {children}
    </Column>
  )
}

const MeetingTimes = ({ meetingBaseUrl, meetingTimes, meetingDuration, timezone }: IMeetingTimesProps): JSX.Element => {
  const availabilitySlotsByDate = computeAvailabilitySlotsByDate(meetingTimes, timezone)
  const style = {
    paddingTop: '4px',
    paddingBottom: '10px',
    borderTop: '1px solid #E1EEF4',
  }

  return (
    <Row>
      <Column style={style}>
        <Row>
          <Column style={{ fontSize: '14px', paddingBottom: '8px', paddingTop: '8px', textAlign: 'center' }}>
            <span>Select a time below to instantly book a meeting</span>
          </Column>
        </Row>
        <Row>
          {Object.keys(availabilitySlotsByDate).sort().slice(0, 3).map((date, i) => (
            <MeetingDateSwimlane
              key={i}
              meetingDate={+date}
              displayTimezone={timezone}
              isLast={i === 2}
            >
              {availabilitySlotsByDate[date].sort().slice(0, 3).map((availabilitySlot, j) => (
                <MeetingTime
                  key={j}
                  scheduleTimeUrl={`${meetingBaseUrl}?emailMeetingTime=${availabilitySlot}&meetingDuration=${meetingDuration}`}
                  meetingTime={availabilitySlot}
                  meetingDuration={meetingDuration}
                  displayTimezone={timezone}
                />
              ))}
            </MeetingDateSwimlane>
          ))}
        </Row>
      </Column>
    </Row>
  )
}

interface IMeetingTimezoneProps {
  agentTimezone: string,
  widgetColor: string,
}

const MeetingTimezone = ({ agentTimezone, widgetColor }: IMeetingTimezoneProps): JSX.Element => {
  const style = {
    display: 'inline-block',
    borderRadius: '3px',
    backgroundColor: `#${widgetColor}`,
    color: '#FFFFFF',
  } as React.CSSProperties

  const zoneAbbr = momentTimezone.tz(agentTimezone).format('z')

  return (
    <span style={{ fontSize: '14px', fontWeight: 'bold' }}>
      Timezone: <span style={style}>&nbsp;{zoneAbbr}&nbsp;</span>
    </span>
  )
}

interface IMeetingDetailsProps {
  agentName: string,
  agentTimezone: string,
  meetingDuration: number,
}

const MeetingDetails = ({ agentName, meetingDuration }: IMeetingDetailsProps): JSX.Element => {
  const style = {
    fontWeight: 'bold',
    fontSize: '14px',
    whiteSpace: 'pre',
  } as React.CSSProperties

  let meetingDetailsString = ''
  if (agentName) {
    meetingDetailsString += `With ${agentName}  ·  `
  }
  meetingDetailsString += `${humanize.humanizeMeetingDuration(meetingDuration)}`

  return <span style={style}>{meetingDetailsString}</span>
}

interface IOneClickSchedulingProps {
  meetingBaseUrl: string,
  agentAvatarUrl: string,
  agentName: string,
  meetingDuration: number,
  meetingName: string,
  agentTimezone: string,
  availabilitySlots: number[],
  widgetColor: string,
}

class OneClickScheduling extends React.Component<IOneClickSchedulingProps, {}> {
  constructor(props: IOneClickSchedulingProps) {
    super(props)
  }

  render()  {
    const {
      meetingBaseUrl,
      agentAvatarUrl,
      agentName,
      availabilitySlots,
      meetingDuration,
      meetingName,
      agentTimezone,
      widgetColor,
    } = this.props

    return (
      <Row className="drift-email-injection" contentEditable={false} spellCheck={false} style={{ border: '1px solid #E1EEF4', color: '#394F5A', width: '474px', minWidth: '474px', tableLayout: 'fixed', WebkitFontSmoothing: 'antialiased', borderRadius: '3px', borderTop: `4px solid #${widgetColor}` }}>
        <Column style={{ padding: '10px' }}>
          <MeetingHeader>
            <Row>
              {agentAvatarUrl && (
                <Column style={{ paddingRight: '13px' }}>
                  <img src={agentAvatarUrl} width={36} height={36} style={{ borderRadius: '3px' }}/>
                </Column>
              )}
              <Column style={{ width: '100%', minWidth: '100%' }}>
                <Row>
                  <Column style={{ paddingBottom: '1px' }}>
                    <MeetingName name={meetingName} />
                  </Column>
                </Row>
                <Row>
                  <Column style={{ paddingBottom: '1px' }}>
                    <MeetingDetails agentName={agentName} meetingDuration={meetingDuration} agentTimezone={agentTimezone} />
                  </Column>
                </Row>
                <Row>
                  <Column style={{ paddingBottom: '1px' }}>
                    <MeetingTimezone agentTimezone={agentTimezone} widgetColor={widgetColor} />
                  </Column>
                </Row>
              </Column>
            </Row>
          </MeetingHeader>
          <MeetingTimes
            meetingBaseUrl={meetingBaseUrl}
            meetingTimes={availabilitySlots}
            meetingDuration={meetingDuration}
            timezone={agentTimezone}
          />
          <MeetingFooter calendarUrl={meetingBaseUrl} />
        </Column>
      </Row>
    )
  }
}

export default OneClickScheduling