import React, {useMemo} from 'react'
import PropTypes from 'prop-types'
import useMedia from 'global/hooks/use-media'
import BEMModule from 'utils/bem'
import styles from './styles.scss'

import SelectInput from 'react-uikit/select-input'
import TabsWithSlider from 'react-uikit/tabs/with-slider'

const bem = new BEMModule(styles)

const MOBILE_BREAKPOINT = '(max-width: 560px)'

const MobileSelectTemplate = ({item}) => {
    const selectLabelClasses = bem.classNames('c-table-tabs__select-label')
    return (
        <div className={selectLabelClasses}>
            <span>Choose:</span>
            <span>&ensp;{item.label}</span>
        </div>
    )
}

MobileSelectTemplate.propTypes = {
    item: PropTypes.object,
}

const TableTabs = ({className, tabIndex, tabs, setTab, theme}) => {
    const modifiers = useMemo(
        () => ({dark: theme === 'dark', light: theme === 'light'}),
        [theme]
    )
    const {[MOBILE_BREAKPOINT]: isMobile} = useMedia([MOBILE_BREAKPOINT])
    const tabsClasses = bem.classNames('c-table-tabs__tabs')
    const tabItemClasses = bem.classNames('c-table-tabs__tab-item')
    const activeTabClasses = bem.classNames('c-table-tabs__tab-item--active')
    const tabSliderClasses = bem.classNames(
        'c-table-tabs__tab-slider',
        modifiers
    )
    const hrClasses = bem.classNames('c-table-tabs__hr', modifiers)
    const mobileRootClasses = bem.classNames('c-table-tabs__mobile', className)

    const onChange = (newTab) => {
        const index = tabs.findIndex((tab) => tab.value === newTab.value)
        setTab({index})
    }

    if (isMobile) {
        return (
            <div className={mobileRootClasses}>
                <SelectInput
                    labelTemplate={MobileSelectTemplate}
                    options={tabs}
                    onChange={onChange}
                    value={tabs[tabIndex]}
                />
            </div>
        )
    }

    return (
        <nav className={className}>
            <hr className={hrClasses} />
            <TabsWithSlider
                activeIndex={tabIndex}
                className={tabsClasses}
                items={tabs}
                itemClassName={tabItemClasses}
                itemActiveClassName={activeTabClasses}
                onItemSelected={setTab}
            >
                <TabsWithSlider.Items />
                <TabsWithSlider.Slider className={tabSliderClasses} />
            </TabsWithSlider>
        </nav>
    )
}

TableTabs.defaultProps = {
    theme: 'dark',
}

TableTabs.propTypes = {
    className: PropTypes.string,
    setTab: PropTypes.func,
    tabIndex: PropTypes.number,
    tabs: PropTypes.array,
    theme: PropTypes.oneOf(['dark', 'light']),
}

export default TableTabs