import React from 'react';
import { connect } from 'react-redux';

import { toggleRule } from '../../common/cards/actions';

import {
  Panel,
  PanelHeader,
  PanelFooter,
  Flex,
  Box,

  Checkbox,
  Tooltip,
} from '../app/components';

const Rule = ({
  rule,
  handleChange,
  checked,
  disabled,
}) => (
  <Checkbox
    label={rule}
    name={rule}
    onChange={handleChange}
    checked={checked}
    disabled={disabled && !checked}
    style={{
      opacity: disabled && !checked ? 0.2 : 1,
    }}
  />
);

const Rules = ({
  rules,
  disabled,
  started,
  toggleRule,
}) => (
  <Panel theme="info">
    <PanelHeader>
      Ruleset
    </PanelHeader>
    <Flex wrap>
      {
        rules.map(({ flag, rule }) => (
          <Box col={2} key={rule}>
            <Rule
              rule={rule}
              handleChange={toggleRule(rule)}
              checked={flag}
              disabled={disabled || started}
            />
          </Box>
        ))
      }
    </Flex>
    <PanelFooter>
      <ul>
        <li>
          Optional. Pick up to 2. The other rules have not been implemented yet.
        </li>
        <li>
          Rules can be changed until the game starts when both decks are populated.
        </li>
      </ul>
    </PanelFooter>
  </Panel>
);

export default connect(
  (state) => {
    const rulesObj = state.cards.present.rules;
    const rules = [];
    let count = 0;
    for (const rule in rulesObj) {
      const flag = rulesObj[rule];
      if (flag) {
        count++;
      }

      rules.push({
        rule,
        flag,
      });
    }

    return {
      rules,
      disabled: count >= 2,
    };
  },
  dispatch => ({
    toggleRule: rule => () => dispatch(toggleRule(rule)),
  })
)(Rules);

@@ -297,16 +297,27 @@
 sabled,%0A
+  started,%0A
 %7D) =%3E (%0A
@@ -417,32 +417,33 @@
 %7D%0A    disabled=%7B
+(
 disabled && !che
@@ -442,24 +442,36 @@
  && !checked
+) %7C%7C started
 %7D%0A    style=
@@ -488,24 +488,25 @@
 pacity: 
+(
 disabled
  && !che
@@ -489,32 +489,44 @@
 acity: (disabled
+ %7C%7C started)
  && !checked ? 0
@@ -940,28 +940,49 @@
 ed=%7Bdisabled
- %7C%7C 
+%7D%0A              started=%7B
 started%7D%0A   

Disable rules when game has started