import {connect} from 'react-redux';
import Button from '../UI/Button/Button';
import Box from '../UI/Box/Box';
import React from 'react';
import './YesNo.css';
import {hideConfirmYesNo} from '../../redux/actions/common_actions';

const mapStateToProps = state => {
  return {
    Title: state.common.ConfirmTitle,
  }
};

const mapDispatchToProps = dispatch => {
  return {
    hideConfirmYesNo: confirmed => dispatch(hideConfirmYesNo(confirmed)),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(props => {
  return (
    <Box dxStyle={{minWidth: '180px', height: 'auto', padding: 'var(--default_spacing)'}}>
      <div style={{width: '100%', height: 'auto'}}>
        <h1 style={{width: '100%', textAlign: 'center'}}>{props.Title}</h1>
      </div>
      <table cellSpacing={5} width="100%">
        <tbody>
          <tr>
            <td width="50%">
              <Button buttonStyles={{width: '100%'}}
                      clicked={() => props.hideConfirmYesNo(true)}>Yes</Button>
            </td>
            <td width="50%">
              <Button buttonStyles={{width: '100%'}}
                      clicked={() => props.hideConfirmYesNo(false)}>No</Button>
            </td>
          </tr>
        </tbody>
      </table>
    </Box>);
});