import React from 'react';
// Dependencies

import builder from 'focus-core/component/builder';
import type from 'focus-core/component/types';

// Mixins

let i18nMixin = require('../../common/i18n/mixin');

// Components

let Popin = require('../popin').component;
import Button from '../../components/button';

let ConfirmationPopin = {
    /**
    * Display name.
    */
    displayName: 'confirmation-popin',
    mixins: [i18nMixin],
    getDefaultProps() {
        return {
            open: false,
            cancelButtonLabel: 'popin.confirmation.cancel',
            confirmButtonLabel: 'popin.confirmation.confirm'
        };
    },

    getInitialState() {
        return ({
            fromButtonClick: false
        });
    },

    propTypes: {
        cancelButtonLabel: type('string'),
        cancelHandler: type(['func', 'object']),
        confirmButtonLabel: type('string'),
        confirmHandler: type(['func', 'object'])
    },

    /**
    * Confirmation action handler
    */
    _handleConfirm() {
        this.toggleOpen();
        if (this.props.confirmHandler) {
            this.props.confirmHandler();
        }
    },

    /**
    * Cancel action handler
    */
    _handleCancel() {
        this.toggleOpen();
        if (this.props.cancelHandler) {
            this.props.cancelHandler();
        }
    },

    _handlePopinClose() {
        if (this.props.cancelHandler && !this.state.fromButtonClick) {
            this.props.cancelHandler();
        }
        this.setState({fromButtonClick: false});
    },

    toggleOpen() {
        this.setState({
            fromButtonClick: true
        }, () => {
            this.refs.popin.toggleOpen();
        });
    },

    render() {
        return (
            <div data-focus='confirmation-popin'>
                <Popin onPopinClose={this._handlePopinClose} open={this.props.open} ref='popin'>
                    {this.props.children}
                    <div data-focus='button-stack'>
                        <Button handleOnClick={this._handleCancel} label={this.i18n(this.props.cancelButtonLabel)}/>
                        <Button handleOnClick={this._handleConfirm} label={this.i18n(this.props.confirmButtonLabel)} option='primary'/>
                    </div>
                </Popin>
            </div>
        );
    }
};

module.exports = builder(ConfirmationPopin);

@@ -36,17 +36,16 @@
 dencies%0A
-%0A
 import b
@@ -135,17 +135,16 @@
 types';%0A
-%0A
 // Mixin
@@ -145,19 +145,21 @@
  Mixins%0A
-%0Ale
+impor
 t i18nMi
@@ -162,26 +162,21 @@
 8nMixin 
-= require(
+from 
 '../../c
@@ -192,19 +192,17 @@
 n/mixin'
-);%0A
+;
 %0A// Comp
@@ -212,50 +212,53 @@
 nts%0A
-%0Alet Popin = require('../popin').component
+import %7B component as Popin %7D from '../popin'
 ;%0Aim
@@ -1499,16 +1499,17 @@
 tState(%7B
+ 
 fromButt
@@ -1522,16 +1522,17 @@
 k: false
+ 
 %7D);%0A    
@@ -2080,16 +2080,17 @@
 nLabel)%7D
+ 
 /%3E%0A     
@@ -2217,16 +2217,17 @@
 primary'
+ 
 /%3E%0A     
@@ -2317,22 +2317,34 @@
 %7D;%0A%0A
-module.exports
+const %7B mixin, component %7D
  = b
@@ -2370,8 +2370,74 @@
 Popin);%0A
+export %7B mixin, component %7D;%0Aexport default %7B mixin, component %7D;%0A

clean application/confirmation-popin