// import necessary React/Redux libraries
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { Button, ButtonGroup } from 'react-bootstrap'
import styled from 'styled-components'
import { getTimeFormat, getDateFormat } from '@opentripplanner/core-utils/lib/time'
import { DateTimeSelector } from '@opentripplanner/trip-form'
import * as TripFormClasses from '@opentripplanner/trip-form/lib/styled'

import { setQueryParam } from '../../actions/form'

// Styles for the DateTimeSelector.
// TODO: Find a way to bring OTP CSS classes in here.
const StyledDateTimeSelector = styled(DateTimeSelector)`
  margin: 0 -15px 20px;
  ${TripFormClasses.DateTimeSelector.DateTimeRow} {
    margin-top: 20px;
  }

  input {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: none;
    color: #555;
    font-family: inherit;
    font-size: 16px;
    height: 34px;
    padding: 6px 12px;
    text-align: center;
    &.focused {
      outline: 0;
      border-color: #66afe9;
      font-weight: 400;
      box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    }
  }

  button {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
    cursor: pointer;
    font-family: inherit;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.42857143;
    outline-offset:-2px;
    padding: 6px 12px;
    text-align: center;
    touch-action: manipulation;
    user-select: none;
    white-space: nowrap;

    &.active {
      background-color: #e6e6e6;
      border-color: #adadad;
      box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
      font-weight: 400;
    }
    &:hover {
      background-color: #e6e6e6;
      border-color: #adadad;
    }
    &.active {
      background-color: #e6e6e6;
      border-color: #adadad;
      box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
      font-weight: 400;
      &:hover {
        background-color: #d4d4d4;
        border-color: #8c8c8c;
      }
    }
  }
`

// Define default routingType labels and components
const rtDefaults = [
  {
    key: 'ITINERARY',
    text: 'Itinerary'
  }, {
    key: 'PROFILE',
    text: 'Profile'
  }
]

class DateTimeModal extends Component {
  static propTypes = {
    routingType: PropTypes.string,
    setQueryParam: PropTypes.func
  }

  render () {
    const { config, date, dateFormatLegacy, departArrive, routingType, setQueryParam, time, timeFormatLegacy } = this.props

    return (
      <div className='date-time-modal'>
        {/* The routing-type selection button row. Only show if more than one configured */}
        {config.routingTypes.length > 1 && (
          <div className='button-row'>
            <ButtonGroup justified>
              {config.routingTypes.map(rtConfig => {
                return (
                  <ButtonGroup key={rtConfig.key}>
                    <Button
                      className={rtConfig.key === routingType ? 'selected' : ''}
                      onClick={() => {
                        setQueryParam({ routingType: rtConfig.key })
                      }}
                    >
                      {rtConfig.text || rtDefaults.find(d => d.key === rtConfig.key).text}
                    </Button>
                  </ButtonGroup>
                )
              })}
            </ButtonGroup>
          </div>
        )}

        {/* The main panel for the selected routing type */}
        <div className='main-panel'>
          <StyledDateTimeSelector
            className='date-time-selector'
            date={date}
            dateFormatLegacy={dateFormatLegacy}
            departArrive={departArrive}
            onQueryParamChange={setQueryParam}
            time={time}
            timeFormatLegacy={timeFormatLegacy}
          />
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  const {departArrive, date, time, routingType} = state.otp.currentQuery
  return {
    config: state.otp.config,
    departArrive,
    date,
    time,
    routingType,
    // These props below are for Safari on MacOS, and old browsers
    // that don't support `<input type="time|date">`.
    // In modern browsers, `<input type="time|date">` already
    // formats the time|date according to the OS settings.
    timeFormatLegacy: getTimeFormat(state.otp.config),
    dateFormatLegacy: getDateFormat(state.otp.config)
  }
}

const mapDispatchToProps = {
  setQueryParam
}

export default connect(mapStateToProps, mapDispatchToProps)(DateTimeModal)

@@ -153,62 +153,8 @@
 ux'%0A
-import %7B Button, ButtonGroup %7D from 'react-bootstrap'%0A
 impo
@@ -2199,183 +2199,8 @@
 %0A%60%0A%0A
-// Define default routingType labels and components%0Aconst rtDefaults = %5B%0A  %7B%0A    key: 'ITINERARY',%0A    text: 'Itinerary'%0A  %7D, %7B%0A    key: 'PROFILE',%0A    text: 'Profile'%0A  %7D%0A%5D%0A%0A
 clas
@@ -2262,43 +2262,8 @@
 = %7B%0A
-    routingType: PropTypes.string,%0A
     
@@ -2326,16 +2326,8 @@
 st %7B
- config,
  dat
@@ -2360,29 +2360,16 @@
 tArrive,
- routingType,
  setQuer
@@ -2472,921 +2472,8 @@
 l'%3E%0A
-        %7B/* The routing-type selection button row. Only show if more than one configured */%7D%0A        %7Bconfig.routingTypes.length %3E 1 && (%0A          %3Cdiv className='button-row'%3E%0A            %3CButtonGroup justified%3E%0A              %7Bconfig.routingTypes.map(rtConfig =%3E %7B%0A                return (%0A                  %3CButtonGroup key=%7BrtConfig.key%7D%3E%0A                    %3CButton%0A                      className=%7BrtConfig.key === routingType ? 'selected' : ''%7D%0A                      onClick=%7B() =%3E %7B%0A                        setQueryParam(%7B routingType: rtConfig.key %7D)%0A                      %7D%7D%0A                    %3E%0A                      %7BrtConfig.text %7C%7C rtDefaults.find(d =%3E d.key === rtConfig.key).text%7D%0A                    %3C/Button%3E%0A                  %3C/ButtonGroup%3E%0A                )%0A              %7D)%7D%0A            %3C/ButtonGroup%3E%0A          %3C/div%3E%0A        )%7D%0A%0A        %7B/* The main panel for the selected routing type */%7D%0A
     
@@ -2923,16 +2923,17 @@
  const %7B
+ 
 departAr
@@ -2952,21 +2952,9 @@
 time
-, routingType
+ 
 %7D = 
@@ -3059,25 +3059,8 @@
 me,%0A
-    routingType,%0A
     

Remove routing profile content.