import {
    MoreFilterSection1,
    MoreFilterSection2,
}
from 'modules/business/components/filterForm/MoreBusinessFilterModal/MoreFilterSections'

import BusinessActions from 'modules/business/actions'
import BusinessFilterFormUtils from 'modules/business/utils/BusinessFilterFormUtils'
import BusinessValueSelectors, {} from 'modules/business/selectors'
import CategoryFilterFloatModal
from 'modules/business/components/filterForm/CategoryFilterFloatModal'
import CategoryValueSelectors from 'modules/category/selectors'
import { DomainValue } from 'modules/business/constants'
import DropdownButton from 'common/components/buttons/DropdownButton'
import FilterBar from 'modules/business/components/filterForm/FilterBar'
import I18n from 'common/I18n'
import Immutable from 'immutable'
import LocationFilterFloatModal from 'modules/business/components/filterForm/LocationFilterFloatModal'
import MoreBusinessFilterModal
from 'modules/business/components/filterForm/MoreBusinessFilterModal'
import PriceRangeSelect
from 'modules/business/components/filterForm/PriceRangeSelect'
import PropTypes from 'prop-types'
import React from 'react'
import { RegionType } from 'modules/region/constants'
import RegionValueSelectors from 'modules/region/selectors'
import Scroll from 'react-scroll'
import ToggleButton from 'common/components/buttons/ToggleButton'
import cn from 'classnames'
import { connect } from 'react-redux'
import connectToggleFormUiWithForm from 'modules/business/components/filterForm/HoC/connectToggleFormUI/connectToggleFormUiWithForm'
import s from './style.scss'
import tracker from 'common/lib/Tracker'

const EnhancedToggleButton = connectToggleFormUiWithForm(
    ToggleButton
)

export function createCategoryTitle(form, queryParams) {
    const categories = queryParams && queryParams.filter(param => param.get('name') === 'categories')

    if (categories && !categories.isEmpty()) {
        return categories.map(category => category.get('description')).join(', ')
    }

    const domain = Number(form.get('domain'))
    if (domain) {
        return domain === DomainValue.FOOD ? I18n.t('business.restaurant.title') : I18n.t('business.beauty-and-spa.title')
    }

    return I18n.t('business.categories.label')
}

export function createLocationTitle(form, queryParams) {
    if (BusinessFilterFormUtils.isCurrentLocationActive(form)) {
        return I18n.t('region.city-selector-modal.options.current-location')
    }

    const regionsFromQueryParams = queryParams.filter(param => param.get('name') === 'regions')
    const selectedRegionsFromQueryParams = regionsFromQueryParams
        .map(regionFromQueryParam => regionFromQueryParam.get('description'))
        .join(', ')

    return selectedRegionsFromQueryParams.length > 0 ? selectedRegionsFromQueryParams : I18n.t('business.location.title')
}

function createSelectedPriceButtons(form) {
    return form.get('features.priceRanges')
        .map((value, index) =>
            createSelectedToggleButton({
                form,
                name: 'features.priceRanges',
                title: createBaht(value),
                value,
                key: index
            }))
}

function createSelectedFilterButtons(form) {
    const moreFilters = [...MoreFilterSection1, ...MoreFilterSection2]
    return moreFilters.map((filter, index) =>
            createSelectedToggleButton({ form, name: filter.name, title: filter.title, key: index }))
        .filter(button => !!button)
}

function createSelectedToggleButton({ form, name, title, value, key }) {
    if (!form.get(name)) { return null }

    return (
        <EnhancedToggleButton
            className={s.selectedToggleButton}
            name={name}
            title={title}
            value={value}
            showCloseButton
            key={key}
        />
    )
}

function createBaht(value) {
    let bahts = ''

    for (let i = 0; i < value; i++) {
        bahts = bahts.concat('฿')
    }

    return bahts
}

export function isCategoryDropdownActive(form) {
    return form.get('categories').size > 0
}

export function isLocationDropDownActive(region, form) {
    if (BusinessFilterFormUtils.isCurrentLocationActive(form)) {
        return true
    }

    if (!region) {
        return false
    }

    // Bangkok and Metropolitan should not be active
    if (region.get('id') === 9681) {
        return false
    }

    if (region.getIn(['type', 'value']) === RegionType.City) {
        return false
    }

    return true
}

export function shouldAllowChangeLocation(region) {
    // Bangkok and Metropolitan(9681) should allow to select bangkok's district and neightborhood
    if (!region || region.get('id') === 9681) {
        return true
    }

    return region.getIn(['type', 'value']) !== RegionType.ViewGroup
}

const resizeFilterBar = () => {
    const ele = document.getElementById('business-filter')
    const bgEle = document.getElementById('business-filter-bg')
    const eleWidth = ele.offsetWidth
    const bodyWidth = document.body.offsetWidth
    const marginX = (bodyWidth - eleWidth) / 2
    const percentX = (marginX / eleWidth) * 100
    bgEle.style.right = `-${percentX}%`
    bgEle.style.left = `-${percentX}%`
}

class BusinessFilterBar extends React.PureComponent {
    static propTypes = {
        region: PropTypes.instanceOf(Immutable.Map),
        queryParams: PropTypes.instanceOf(Immutable.List)
    }

    componentDidMount() {
        window.addEventListener('resize', resizeFilterBar)
        resizeFilterBar()
    }

    openCategoryFilterModal = () => {
        if (createCategoryTitle(this.props.form, this.props.queryParams) !== I18n.t('business.categories.label')) {
            Scroll.scroller.scrollTo('BusinessFilterBar', {
                duration: 400,
                delay: 10,
                smooth: true,
            })
        }

        this.props.openCategoryFilterModal(!this.props.isCategoryFilterModalOpen)
        tracker.trackEvent('QuickBusinessFilter', 'Click', 'Category')
    }

    openLocationFilterModal = () => {
        if (!shouldAllowChangeLocation(this.props.region)) {
            return
        }

        if (createLocationTitle(this.props.form, this.props.queryParams) !== I18n.t('business.location.title')) {
            Scroll.scroller.scrollTo('BusinessFilterBar', {
                duration: 400,
                delay: 10,
                smooth: true,
            })
        }

        this.props.openLocationFilterModal(!this.props.isLocationFilterModalOpen)
        tracker.trackEvent('QuickBusinessFilter', 'Click', 'Location')
    }

    openMoreBusinessFilterModal = () => {
        this.props.openMoreBusinessFilterModal(!this.props.isMoreBusinessFilterModalOpen)
        tracker.trackEvent('QuickBusinessFilter', 'Click', 'More')
    }

    render() {
        const { form, foodCategoryGroups, region, cityIds, queryParams } = this.props

        const isFoodFilterForm = BusinessFilterFormUtils.isFoodFilter(form.get('domain'), form.get('categories'), foodCategoryGroups)

        const categoryTitle = createCategoryTitle(form, queryParams)
        const locationTitle = createLocationTitle(form, queryParams)

        const selectedFilterButtons = createSelectedFilterButtons(form)
        return (
            <Scroll.Element name="BusinessFilterBar">
                <FilterBar>
                    {/* In iOS, somehow floatModal appear cutoff when it is inside container with '-webkit-overflow-scrolling' */}
                    { /* Mobile - Modal */ }
                    <div className="visible-xs visible-sm">
                        <CategoryFilterFloatModal />
                        <LocationFilterFloatModal queryParams={queryParams} region={region} />
                    </div>
                    <ul className={s.container} id="business-filter" >
                        <li className={s.item}>
                            <div className="visible-md visible-lg"><Scroll.Element name="Category"><CategoryFilterFloatModal /></Scroll.Element></div>
                            <DropdownButton
                                title={categoryTitle}
                                variant={isCategoryDropdownActive(form, cityIds) ? 'active' : 'inactive'}
                                onClick={this.openCategoryFilterModal}
                            />
                        </li>
                        <li className={s.item}>
                            <div className="visible-md visible-lg"><Scroll.Element name="Location"><LocationFilterFloatModal queryParams={queryParams} region={region} /></Scroll.Element></div>
                            <DropdownButton
                                title={locationTitle}
                                variant={isLocationDropDownActive(region, form
                                ) ? 'active' : 'inactive'}
                                shouldShowDropdownIcon={shouldAllowChangeLocation(region)}
                                onClick={this.openLocationFilterModal}
                            />
                        </li>
                        {isFoodFilterForm && <li className={cn(s.item, s.showOnlyDesktop)}>
                            <PriceRangeSelect trackEventParams={{category: 'QuickBusinessFilter', action: 'Click'}} />
                        </li>}
                        {isFoodFilterForm && <li className={s.item}>
                            <EnhancedToggleButton
                                name="features.foodOrder"
                                iconName="delivery-black"
                                activeIconName="delivery-white"
                                title={I18n.t('business.order-delivery.title')}
                                trackEventParams={{category: 'QuickBusinessFilter', action: 'Click', label: 'Delivery'}}
                            />
                        </li>}
                        <li className={s.item}>
                            <EnhancedToggleButton
                                name="features.open"
                                iconName="clock"
                                activeIconName="clock-white"
                                title={I18n.t('business.open-now.title')}
                                trackEventParams={{category: 'QuickBusinessFilter', action: 'Click', label: 'OpenNow'}}
                            />
                        </li>

                        { /* Mobile - Selected Price && More Filters */ }
                        <li className={cn(s.item, s.showOnlyMobile)}>
                            {createSelectedPriceButtons(form)}
                        </li>
                        <li className={cn(s.item, s.showOnlyMobile)}>{selectedFilterButtons}</li>

                        <li className={s.item}>
                            <div className={s.advancedSearchButtonDesktopC} onClick={this.openMoreBusinessFilterModal}>
                                <ToggleButton iconName="black-filter" title={I18n.t('business.more-filters.title')} />
                            </div>
                            <div className={s.advancedSearchButtonMobileC} onClick={this.openMoreBusinessFilterModal}>
                                <ToggleButton iconName="three-dots" title={I18n.t('business.more-filters.title')} />
                            </div>
                            <MoreBusinessFilterModal />
                        </li>
                    </ul>

                    { /* Desktop - Selected More Filters */ }
                    {selectedFilterButtons.length > 0 &&
                    <ul className={cn(s.selectedFilterContainer, s.showOnlyDesktop)}>
                        <li className={s.item}>{selectedFilterButtons}</li>
                    </ul>
                }
                </FilterBar>
            </Scroll.Element>
        )
    }
}

const mapStateToProps = state => ({
    form: BusinessValueSelectors.getBusinessFilterForm(state),
    cityIds: RegionValueSelectors.getCityIds(state),
    foodCategoryGroups: CategoryValueSelectors.getFoodCategoryGroups(state),
    beautyCategories: CategoryValueSelectors.getBeautyCategories(state),
    isCategoryFilterModalOpen: BusinessValueSelectors.getCategoryFilterModal(state).get('isOpen'),
    isLocationFilterModalOpen: BusinessValueSelectors.getLocationFilterModal(state).get('isOpen'),
    isMoreBusinessFilterModalOpen: BusinessValueSelectors.getMoreBusinessFilterModalOpen(state)
})

const mapDispatchToProps = {
    openCategoryFilterModal: BusinessActions.openCategoryFilterModal,
    openLocationFilterModal: BusinessActions.openLocationFilterModal,
    openMoreBusinessFilterModal: BusinessActions.openMoreBusinessFilterModal
}

export default connect(mapStateToProps, mapDispatchToProps)(BusinessFilterBar)