import React from 'react'
import PropTypes from 'prop-types'
import SegmentedControl from 'react-uikit/tabs/segmented-control'
import BEMModule from 'utils/bem'
import styles from './styles.scss'
const bem = new BEMModule(styles)

const OrderActionControl = ({value: {activeIndex, items}, onChange}) => {
    const stockOrderFormActionInputClasses = bem.classNames(
        'c-order-action-control'
    )
    const onItemSelected = ({index, item}) => {
        onChange({activeIndex: index, items, value: item.value})
    }

    return (
        <div className={stockOrderFormActionInputClasses}>
            <SegmentedControl
                activeIndex={activeIndex}
                items={items}
                onItemSelected={onItemSelected}
                size="small"
            >
                <SegmentedControl.Items />
            </SegmentedControl>
        </div>
    )
}

OrderActionControl.propTypes = {
    value: PropTypes.shape({
        activeIndex: PropTypes.number,
        items: PropTypes.array,
    }),
    onChange: PropTypes.func,
}

export default OrderActionControl