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

const YesNo = (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.confirm(true)}>
                Yes
              </Button>
            </td>
            <td width="50%">
              <Button buttonStyles={{ width: '100%' }} clicked={() => props.confirm(false)}>
                No
              </Button>
            </td>
          </tr>
        </tbody>
      </table>
    </Box>
  );
};

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

const mapDispatchToProps = (dispatch) => {
  return {
    confirm: (confirmed) => dispatch(confirmYesNoAction.complete(confirmed)),
  };
};

YesNo.propTypes = {
  Title: PropTypes.string.isRequired,
  confirm: PropTypes.func.isRequired,
};

export default connect(mapStateToProps, mapDispatchToProps)(YesNo);