import React from 'react'
import styled from 'styled-components'
import Input from './Input'
import InputHolder from './InputHolder'
import Icon from './Icon'
import {Column, Flex, Row, Cell} from './layout'

const Dropdown = styled(Column)`
  background-color: #ffffff;
  height: ${props => props.open ? 'auto' : 0};
  overflow: hidden;
  position: absolute;
  z-index: 100;
  top: 45px;
  left: 0;
  border-radius: 2px;
  width: 250px;
  min-width: 100%;
  max-height: 300px;
  overflow: auto;
  ${props => props.theme.shadow};
  color: ${props => props.theme.colors.darkGrey};
`

const Counter = styled(Flex).attrs(() => ({height: 40, alignItems: 'center'}))` 
`

const Age = styled(Counter)`
  color: ${props => props.theme.colors.lightGrey};
  font-size: 14px;
  padding-left: 20px;
`

const Number = styled.p`
  width: 40px;
  text-align: center;
`

const ButtonIcon = styled.i`
  font-size: 12px;
  color: ${props => props.enabled ? props.theme.colors.yellow : props.theme.colors.lightGrey};
`

const Holder = styled(Flex)`
  height: 25px;
  width: 25px;
  border: 2px solid ${props => props.enabled ? props.theme.colors.yellow : props.theme.colors.lightGrey};
  border-radius: 2px;
  cursor: ${props => props.enabled ? 'pointer' : 'normal'};
  :hover {
    ${ButtonIcon} {
      font-size: ${props => props.enabled ? 14 : 12}px;
    }
  }
`

const Button = ({minus, onClick, enabled}) => (
    <Holder enabled={enabled} onClick={onClick} alignItems="center" justifyContent="center">
        {minus ? <ButtonIcon enabled={enabled} className="fas fa-minus" /> : <ButtonIcon enabled={enabled} className="fas fa-plus" />}
    </Holder>
)

class TravelersInput extends React.Component {
    holder = null

    watchOutsideClick = (e) => {
        if (!this.holder.contains(e.target)) {
            this.props.input.onBlur()
        }
    }

    componentDidMount() {
        window.addEventListener('mousedown', this.watchOutsideClick)
    }

    updateAge = (increase, who, index) => {
        const updateYthYears = () => {
            if (increase) {
                return this.props.input.value.ythYears.map((year, i) => {
                    if (i === index && year < 15) return year + 1
                    else return year
                })
            } else {
                return this.props.input.value.ythYears.map((year, i) => {
                    if (i === index && year > 12) return year - 1
                    else return year
                })
            }
        }
        const updateChdYears = () => {
            if (increase) {
                return this.props.input.value.chdYears.map((year, i) => {
                    if (i === index && year < 11) return year + 1
                    else return year
                })
            } else {
                return this.props.input.value.chdYears.map((year, i) => {
                    if (i === index && year > 2) return year - 1
                    else return year
                })
            }
        }
        this.props.input.onChange({
            ...this.props.input.value,
            ythYears: who === 'yth' ? updateYthYears() : this.props.input.value.ythYears,
            chdYears: who === 'chd' ? updateChdYears() : this.props.input.value.chdYears,
        })
    }

    updatePassengers = (increase, who) => {
        const getYthYears = () => {
            if (increase) {
                return [...this.props.input.value.ythYears, 12]
            } else {
                return this.props.input.value.ythYears.slice(0, this.props.input.value.ythYears.length - 1)
            }
        }
        const getChdYears = () => {
            if (increase) {
                return [...this.props.input.value.chdYears, 2]
            } else {
                return this.props.input.value.chdYears.slice(0, this.props.input.value.chdYears.length - 1)
            }
        }
        const allTogether = this.props.input.value.adt + this.props.input.value.yth + this.props.input.value.chd + this.props.input.value.inf
        if (!increase && who === 'adt' && this.props.input.value.adt === 1 && this.props.input.value.inf === 1 && allTogether === 2) {
            return
        }
        if (!increase && allTogether === 1) {
            return
        }
        if (increase && allTogether === 9) {
            return
        }
        if (!increase && this.props.input.value[who] === 0) {
            return
        }
        if (increase && who === 'inf' && this.props.input.value.inf === this.props.input.value.adt) {
            return
        }
        this.props.input.onChange({
            ...this.props.input.value,
            inf: !increase && who === 'adt' &&  this.props.input.value.adt === this.props.input.value.inf
                ? this.props.input.value.inf - 1
                : this.props.input.value.inf,
            [who]: increase ? this.props.input.value[who] + 1 : this.props.input.value[who] - 1,
            ythYears: who === 'yth' ? getYthYears() : this.props.input.value.ythYears,
            chdYears: who === 'chd' ? getChdYears() : this.props.input.value.chdYears,
        })
    }
    render() {
        const {input, meta} = this.props
        const {adt, yth, chd, inf, ythYears, chdYears} = input.value
        const allTogether = adt + yth + chd + inf
        return (
            <InputHolder ref={node => {this.holder = node}}>
                <Input style={{cursor: 'pointer', userSelect: 'none'}} onClick={meta.active ? input.onBlur : input.onFocus} as={Flex} alignItems="center">
                    {allTogether} {allTogether > 1 ? 'Pasažieri' : 'Pasažier'}
                </Input>
                <Dropdown open={meta.active}>
                    <Column p={20}>
                        <Row>
                            <Cell width={1 / 2}>
                                <Counter>Adults</Counter>
                                <Counter>Youth</Counter>
                                {input.value.ythYears.map(yth => (
                                    <Age>Age</Age>
                                ))}
                                <Counter>Children</Counter>
                                {input.value.chdYears.map(chd => (
                                    <Age>Age</Age>
                                ))}
                                <Counter>Infants</Counter>
                            </Cell>
                            <Cell width={1 / 2}>
                                <Column alignItems="flex-end">
                                    <Counter>
                                        <Button enabled={adt > 0 && allTogether > 1} onClick={() => this.updatePassengers(false, 'adt')} minus />
                                        <Number>{adt}</Number>
                                        <Button enabled={allTogether < 9} onClick={() => this.updatePassengers(true, 'adt')} />
                                    </Counter>
                                    <Counter>
                                        <Button enabled={yth > 0 && allTogether > 1} onClick={() => this.updatePassengers(false, 'yth')} minus />
                                        <Number>{yth}</Number>
                                        <Button enabled={allTogether < 9} onClick={() => this.updatePassengers(true, 'yth')} />
                                    </Counter>
                                    {ythYears.map((yth, i) => (
                                        <Counter>
                                            <Button enabled={ythYears[i] > 12} onClick={() => this.updateAge(false, 'yth', i)} minus />
                                            <Number>{yth}</Number>
                                            <Button enabled={ythYears[i] < 15} onClick={() => this.updateAge(true, 'yth', i)} />
                                        </Counter>
                                    ))}
                                    <Counter>
                                        <Button enabled={chd > 0 && allTogether > 1} onClick={() => this.updatePassengers(false, 'chd')} minus />
                                        <Number>{chd}</Number>
                                        <Button enabled={allTogether < 9} onClick={() => this.updatePassengers(true, 'chd')} />
                                    </Counter>
                                    {chdYears.map((chd, i) => (
                                        <Counter>
                                            <Button enabled={chdYears[i] > 2} onClick={() => this.updateAge(false, 'chd', i)} minus />
                                            <Number>{chd}</Number>
                                            <Button enabled={chdYears[i] < 11} onClick={() => this.updateAge(true, 'chd', i)} />
                                        </Counter>
                                    ))}
                                    <Counter justifyContent="flex-end">
                                        <Button enabled={inf > 0 && allTogether > 1} onClick={() => this.updatePassengers(false, 'inf')} minus />
                                        <Number>{inf}</Number>
                                        <Button enabled={allTogether < 9 && inf < adt} onClick={() => this.updatePassengers(true, 'inf')} />
                                    </Counter>
                                </Column>
                            </Cell>
                        </Row>
                    </Column>
                </Dropdown>
                <Icon className="fas fa-user" />
            </InputHolder>
        )
    }
}

export default TravelersInput
