/* tslint:disable:jsx-no-lambda */
import * as React from 'react';
import { connect} from 'react-redux'
import * as ReactDOM from 'react-dom'
import {
    showModal,
    hideModal,
    showBasicModal,
    showMessageModal,
    showIconMessageModal,
} from '../actions/modal'
import * as Reducers from '../reducers'
import * as Constants from '../constants'
import * as Modal from '../web/modal'
import {
    Button,
    ButtonBar,
    Column,
    Row,
    ModalPopup,
    ModalPopupContent,
    BasicModal,
    MessageModal,
    ConfirmModal,

} from '../web'

const styles = require('../../src/styles/example/modal-example.scss')

interface ModalExampleState {
    showModal: (modalType: string, modalProps: any) => any,
    hideModal: () => any,
}

class _ModalExample extends React.Component<any, ModalExampleState> {
    public render() {

        const showBasicModal = () => this.props.showBasicModal(
            'This is the basic modal, there is a close button & the background is active.');

        const showMessageModal = () => this.props.showMessageModal(
            'This is a showMessageModal modal');

        const showIconMessageModal = () => this.props.showIconMessageModal(
            'This is a showIconMessageModal modal', 'info');

        const showConfirmModal = () => this.props.showModal(CUSTOM_CONFIRM_MODAL_KEY)

        const showCustomModal = () => this.props.showModal(RANDOM_CUSTOM_MODAL_KEY, {
            count: 1,
        });

        return (
            <Column fullWidth>
                <Row>
                    <ButtonBar>
                        <Button onClick={showBasicModal} condensed>
                            showBasicModal
                        </Button>
                        <Button onClick={showMessageModal} condensed>
                            showMessageModal
                        </Button>
                        <Button onClick={showIconMessageModal} condensed>
                            showIconMessageModal
                        </Button>
                        <Button onClick={showConfirmModal} condensed>
                            Confirm Modal
                        </Button>
                        <Button onClick={showCustomModal} condensed>
                            Custom Modal
                        </Button>
                    </ButtonBar>
                </Row>
            </Column>
        )
    }
}

const mapStateToProps = (state: any) => ({
    state: state[Reducers.MODAL_REDUCER_KEY],
})

const mapActionsToProps = {
    showModal,
    hideModal,
    showBasicModal,
    showMessageModal,
    showIconMessageModal,
}

export const ModalExample = connect(mapStateToProps, mapActionsToProps)(_ModalExample)

// 2 EXAMPLES OF CUSTOM MODALS
const CUSTOM_CONFIRM_MODAL_KEY = 'CUSTOM_CONFIRM_MODAL_KEY'
const RANDOM_CUSTOM_MODAL_KEY = 'RANDOM_CUSTOM_MODAL_KEY'

const CustomConfirmModal = () => (
    <ConfirmModal
        icon="info"
        onConfirm={() => console.log('Confirming!')}
        onCancel={() => console.log('Cancelling!')}>
        This is a confirm modal with an icon and some optional handlers.
    </ConfirmModal>
)

class _CustomModal extends React.Component<any, any> {
    public render() {
        const state = this.props.state
        const props = state.modalProps
        const count = props.count

        const openAnotherModal = () => this.props.showModal(RANDOM_CUSTOM_MODAL_KEY, {
            closeButton: true,
            backgroundActive: false,
            count: count + 1,
        });

        return (
        <ModalPopup >
            <ModalPopupContent>
                <Column align="center">
                    <Row tooltip="POTATO POTATO">
                        This is a custom modal component. Number {count} in chain
                    </Row>
                    <Row>
                        <Button onClick={openAnotherModal} condensed>Open Another Modal!</Button>
                    </Row>
                </Column>
            </ModalPopupContent>
            <ButtonBar>
                <Button onClick={this.props.closeModal}>Close</Button>
            </ButtonBar>
        </ModalPopup>
        )
    }
}

const customStateToProps = (state: any) => ({
})
const customActionsToProps = {
    showModal,
}

const CustomModal = connect(
    customStateToProps,
    customActionsToProps,
)(_CustomModal)

// NOT SURE ABOUT WHETHER THESE SHOULD BE PRE-REGISTERED
console.log('REGISTERING MODALS', BasicModal, MessageModal)
Modal.registerModalComponent(Constants.BASIC_MODAL_KEY, BasicModal)
Modal.registerModalComponent(Constants.MESSAGE_MODAL_KEY, MessageModal)
Modal.registerModalComponent(RANDOM_CUSTOM_MODAL_KEY, CustomModal)
Modal.registerModalComponent(CUSTOM_CONFIRM_MODAL_KEY, CustomConfirmModal)

/* tslint:enable:jsx-no-lambda */