import * as React from 'react'
import * as _ from 'lodash'
import { ICustomMeetingTypesComponentProps, IMeetingListItemProps } from './interfaces'
import IconSVG from 'svg-inline-react'


const calendarSrc = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../img/svg/calendar-check.svg')
const drift_logo = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../img/svg/drift-logo-circle-white.svg')

require('./styles.styl')

const COLOR_CLASSES = {
  15: 'red',
  30: 'purple',
  45: 'blue',
  60: 'green',
}

const MeetingListItem = ({ data, slug, slugs, onClick }: IMeetingListItemProps) =>
  <div className="drift-custom-meeting-list-item" onClick={() => onClick(slug, data)}>
    <IconSVG className={`${_.get(COLOR_CLASSES, data.meetingTemplate.duration)} drift-custom-meeting-calendar-icon`} src={calendarSrc} />
    <span className="drift-custom-meeting-name">{data.meetingTemplate.name}</span>
    <span className="drift-custom-meeting-duration">{` (${data.meetingTemplate.duration}m)`}</span>
  </div>

const CustomMeetingTypes = ({ defaultMeeting, customMeetingTypes, onClick }: ICustomMeetingTypesComponentProps) => {
  const defaultAndCustom = [defaultMeeting, ..._.map(customMeetingTypes, (data, slug) => ({ ...data, slug }))]

  return <div className="drift-custom-meeting-type-container">
    <div className="drift-custom-meeting-header"><IconSVG className="drift-custom-meeting-logo" src={drift_logo} />Drift meetings</div>
    <div className="drift-custom-meeting-subtitle">Share availability for...</div>
    {
      _(defaultAndCustom)
      .sortBy(meeting => meeting.meetingTemplate.duration)
      .map((meeting, index) =>
        <MeetingListItem
          key={index}
          data={meeting}
          slug={meeting.slug}
          onClick={onClick}
        />)
        .value()
    }
  </div>
}

export default CustomMeetingTypes