import React from 'react'
import ReactDOM from 'react-dom'
import ObservableContainer from 'src/bootstrapper/connectData/ObservableContainer'
import { observer, toCommonState } from 'state/common'
// import { mount, render } from 'enzyme'
import ReactTestUtils from 'react-dom/test-utils'
import ToggleMolecule from '../ToggleMolecule'

/* Referred and reused \widgets\Checkout\wr\PaymentMethodAccordion\CardTypes\index.js*/
class ToggleContainer extends ObservableContainer {
  static types = {
    isPrimaryVisible: true,
    isSecondaryVisible: false,
  }
  constructor(props) {
    super(props)
    this.extendObservable(ToggleContainer.types)
  }
  handlePrimaryButtonToggle = () => {
    this.isPrimaryVisible = (this.isPrimaryVisible ? this.isPrimaryVisible : !this.isPrimaryVisible)
    this.isSecondaryVisible = (this.isPrimaryVisible ? false : this.isSecondaryVisible)
  }
  handleSecondaryButtonToggle = () => {
    this.isSecondaryVisible = (this.isSecondaryVisible ? this.isSecondaryVisible : !this.isSecondaryVisible)
    this.isPrimaryVisible = (this.isSecondaryVisible ? false : this.isPrimaryVisible)
  }
}

const container = new ToggleContainer()

@observer
class RadioGroupMoleculeExtension extends React.Component {
  state = container
  render() {
    return (
      <div>
        <ToggleMolecule
          isRadio={true}
          isSelected={this.state.isPrimaryVisible}
          onClick={this.state.handlePrimaryButtonToggle}
          key={'primary'}
        />
        <ToggleMolecule
          isRadio={true}
          isSelected={(this.state.isSecondaryVisible)}
          onClick={this.state.handleSecondaryButtonToggle}
          key={'secondary'}
        />
      </div>
    )
  }
}

describe('RadioToggle Tests', () => {
  it('`isSelected` state changes on toggle click', () => {
    const Wrapper = ReactTestUtils.renderIntoDocument(
      <RadioGroupMoleculeExtension />
    )
    const radioNode = ReactDOM.findDOMNode(Wrapper)
    let radioComponents = ReactTestUtils.scryRenderedComponentsWithType(Wrapper, ToggleMolecule)
    expect(radioComponents[0].props.isSelected).toBeTruthy()
    expect(radioComponents[1].props.isSelected).toBeFalsy()
    ReactTestUtils.Simulate.click(radioNode.children[1])
    radioComponents = ReactTestUtils.scryRenderedComponentsWithType(Wrapper, ToggleMolecule)
    expect(radioComponents[1].props.isSelected).toBeTruthy()
    expect(radioComponents[0].props.isSelected).toBeFalsy()
    // console.log('********', ReactTestUtils.scryRenderedComponentsWithType(Wrapper, ToggleMolecule)[1])
    // console.log('radio',  ReactTestUtils.scryRenderedComponentsWithType(Wrapper, ToggleMolecule)[1].props)
    // ReactTestUtils.Simulate.click(radioButton1)
    // console.log('radio',  ReactTestUtils.scryRenderedComponentsWithType(Wrapper, ToggleMolecule)[1].props)
    // console.log('radio', radioButton1.props)
  })
})