import React from 'react';
import PropTypes from 'prop-types';
import onlyUpdateForKeys from 'recompose/onlyUpdateForKeys';
import styled from 'styled-components';

import * as dimensions from '@descarteslabs/pizzazz/styles/dimensions';
import * as shadows from '@descarteslabs/pizzazz/styles/shadows';
import { flex_row, flex_col } from '@descarteslabs/pizzazz/styles/mixins';

import Button from '@descarteslabs/cycle-widgets/es2015/Button';

const DialogContainer = styled.div`
    height: inherit;
    width: inherit;
`;
const DialogOverlay = styled.div`
    height: 100%;
    width: 100%;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
`;
const DialogContent = styled.div`
    ${flex_col({ align: 'center', justify: 'space-between' })}
    position: absolute;
    top: 50%;
    left: 50%;
    height: 125px;
    width: 400px;
    margin-top: -62.5px;
    margin-left: -200px;
    background: white;
    ${shadows.medium};
    z-index: 2;
`;
const DialogText = styled.div`
    padding: ${dimensions.base};
`;
const DialogButtonsContainer = styled.div`
    ${flex_row({ align: 'center' })}
`;
const DialogOkButtonContainer = styled.div`
    padding: ${dimensions.base};
`;
const DialogCancelButtonContainer = styled.div`
    padding: ${dimensions.base};
`;

class Dialog extends React.Component {

    static propTypes = {
        text: PropTypes.string.isRequired,
        onCancelHandler: PropTypes.func.isRequired,
        onOkHandler: PropTypes.func.isRequired,
        cancelLabel: PropTypes.string,
        isOpen: PropTypes.bool,
        okLabel: PropTypes.string,
    };

    static defaultProps = {
        isOpen: false,
        okLabel: 'OK',
        cancelLabel: 'Cancel',
        onOkHandler: _ => _,
        onCancelHandler: _ => _,
    };

    constructor(props) {
        super(props);
        const { isOpen } = props;
        this.state = {
            isOpen,
        };
    }

    componentWillReceiveProps(nextProps) {
        if (!('isOpen' in nextProps)) return;
        const { isOpen } = nextProps;
        this.setState({
            isOpen,
        });
    }

    _okHandler = e => {
        this.setState({
            isOpen: false,
        });
        this.props.onOkHandler(e);
    };

    _cancelHandler = e => {
        this.setState({
            isOpen: false,
        });
        this.props.onCancelHandler(e);
    };

    render() {
        const { text, okLabel, cancelLabel } = this.props;
        const { isOpen } = this.state;

        return (isOpen
            ? <DialogContainer
                className="DialogContainer"
            >
                <DialogContent>
                    <DialogText>
                        {text}
                    </DialogText>
                    <DialogButtonsContainer>
                        <DialogOkButtonContainer>
                            <Button
                                key="ok"
                                onClick={this._okHandler}
                            >
                                {okLabel}
                            </Button>
                        </DialogOkButtonContainer>
                        <DialogCancelButtonContainer>
                            <Button
                                key="cancel"
                                onClick={this._cancelHandler}
                            >
                                {cancelLabel}
                            </Button>
                        </DialogCancelButtonContainer>
                    </DialogButtonsContainer>
                </DialogContent>
                <DialogOverlay />
            </DialogContainer>
            : null
        );
    }
}

const enhance = onlyUpdateForKeys([ 'text', 'onCancelHandler', 'onOkHandler', 'cancelLabel', 'isOpen', 'okLabel' ]);

export default enhance(Dialog);