import React from 'react'
import PropTypes from 'prop-types'
import inputNames from 'common-fe/constants/input-names'
import orderExpiry from 'common-fe/constants/order-expiry'
import {isWeekend} from 'common-fe/utils/date'
import CalendarDateInput from 'components/calendar-date-input'
import Form from 'react-uikit/form'
import Layout from 'react-uikit/layout'
import SelectInput from 'react-uikit/select-input'

class ExpirationInput extends React.PureComponent {
    get isDateExpiration() {
        return this.props.expiryType === orderExpiry.DATE.value
    }

    render() {
        const {className, labelClassName, maxDate, minDate, value} = this.props

        return (
            <Layout.Grid className={className}>
                <Layout.Flex
                    className={labelClassName}
                    align="center"
                    justify="end"
                >
                    Expiry (Good Till)
                </Layout.Flex>

                <div />

                <Form.Field
                    render={SelectInput}
                    name={inputNames.EXPIRY_TYPE}
                    options={Object.values(orderExpiry)}
                    size="small"
                />

                {this.isDateExpiration && (
                    <React.Fragment>
                        <Layout.Flex
                            className={labelClassName}
                            align="center"
                            justify="end"
                        >
                            Expiration Date
                        </Layout.Flex>

                        <div />

                        <Form.Field
                            disabledDates={[isWeekend]}
                            defaultDate={value}
                            maxDate={maxDate}
                            minDate={minDate}
                            name={inputNames.EXPIRATION}
                            dateFormat="F j, Y"
                            render={CalendarDateInput}
                            size="small"
                            required
                        />
                    </React.Fragment>
                )}
            </Layout.Grid>
        )
    }
}

ExpirationInput.propTypes = {
    className: PropTypes.string,
    expiryType: PropTypes.string,
    labelClassName: PropTypes.string,
    maxDate: PropTypes.instanceOf(Date),
    minDate: PropTypes.instanceOf(Date),
    value: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
}

export default ExpirationInput