import React from 'react'
import PropTypes from 'prop-types'

import Dialog from 'react-uikit/dialog'
import renderButton from './partials/submit-button'
import renderContent from './partials/content'
import renderToggle from './partials/toggle'

import BEMModule from 'utils/bem'
import styles from './styles.scss'
const bem = new BEMModule(styles)

class TradeFilterDialog extends React.PureComponent {
    dialog = React.createRef()

    applyFilter = (filter) => {
        this.dialog.current.close?.()

        this.props.onApplyFilter?.(filter)
    }

    render() {
        const {
            appliedFilter,
            bondType,
            content,
            filterKey,
            label,
            renderForm: Form,
            securityType,
            formProps,
        } = this.props

        const titleClassNames = bem.classNames('c-trade-filter-dialog__title')
        const formClassNames = bem.classNames('c-trade-filter-dialog__form')
        const dialogClassNames = bem.classNames('c-trade-filter-dialog__dialog')

        const Button = renderButton({label})
        const Content = renderContent({...content})
        const Toggle = renderToggle({label})

        return (
            <Dialog
                dialogClassName={dialogClassNames}
                ref={this.dialog}
                renderToggle={Toggle}
            >
                <h4 className={titleClassNames}>{label}</h4>

                <Form
                    appliedFilter={appliedFilter}
                    bondType={bondType}
                    className={formClassNames}
                    filterKey={filterKey}
                    renderContent={Content}
                    securityType={securityType}
                    submitButton={Button}
                    onSubmit={this.applyFilter}
                    unregisterOnExit
                    {...formProps}
                />
            </Dialog>
        )
    }
}

TradeFilterDialog.propTypes = {
    appliedFilter: PropTypes.object,
    bondType: PropTypes.string,
    content: PropTypes.shape({
        definition: PropTypes.string,
        help: PropTypes.string,
    }),
    filterKey: PropTypes.string,
    formProps: PropTypes.object,
    label: PropTypes.string,
    renderForm: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
    securityType: PropTypes.string,
    onApplyFilter: PropTypes.func,
}

export default TradeFilterDialog