import React from 'react'
import styles from '../ClientView/ClientView.css'
import Select from 'react-select'

var localStorage = require('localStorage')
var userRoles = []

// check for localStorage before creating a new item
// failsafes need to be added here, some data isn't passed the same and it breaks
function checkLocalStorageAndConvert () {
  let storedRoles = localStorage.getItem('User_Roles')
  if (JSON.parse(localStorage.getItem('User_Roles')) === null) {
    console.log('local storage is empty ')
  } else {
    storedRoles = JSON.parse(localStorage.getItem('User_Roles'))
    let i = 0
    for (i = 0; i < storedRoles.length; i++) {
      userRoles.push(storedRoles[i])
    }
  }
}

checkLocalStorageAndConvert()

const formOptions = [
  { value: `${userRoles[0]}`, label: `${userRoles[0]}` },
  { value: `${userRoles[1]}`, label: 'Test Firm 1' },
  { value: `${userRoles[2]}`, label: 'Test Firm 2' }
]

// empty until function below puts roles in it
var testOptions = [
]
// for each item in the array, create a key + value pair in the options object
userRoles.forEach(function (element, index) {
  testOptions[`Role_${index + 1}`] = element
})
console.log(testOptions)

export default class Dashboard extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      selectionMade: null,
      selectedOption: [],
      isHidden: true
    }
  }

  componentDidMount () {
  }

  render () {
    return (
      <div id='dashboardContainer'>
        <h2>Clients:</h2>
        <ClientView selectionMade={this.state.selectionMade} />
      </div>
    )
  }
}

// first dropdown menu -- ClientView
const clientOptions = [
  { value: `${testOptions.Role_1}`, label: `${testOptions.Role_1}` },
  { value: `${testOptions.Role_2}`, label: `${testOptions.Role_2}` },
  { value: `${testOptions.Role_3}`, label: `${testOptions.Role_3}` }
]

export class ClientView extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      selectionMade: null,
      selectedOption: [],
      isHidden: true
    }
    this.handleClientSelection = this.handleClientSelection.bind(this)
  }

  handleChange (event) {
    event.preventDefault()
  }

  handleClientSelection = (selectedOption) => {
    this.setState({ selectedOption })
    this.setState({ selectionMade: true })
    this.setState({ isHidden: false })
  }

  // if a selection has not been made, this method keeps formView from rendering
  selectionMade () {
    if (this.state.selectionMade === null) {
      return false
    } else {
      return true
    }
  }

  render () {
    return (
      <div id='clientContainer' className='App'>
        <Select options={clientOptions} styles={styles} onChange={this.handleClientSelection} onInputChange={this.handleFormSelection} />
        <br />
        <hr />
        <>
          {this.selectionMade() && <FormView />}
        </>
      </div>
    );
  }
}

export class FormView extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      visibility: false,
      isHidden: true
    }
  }

  handleFormSelection (event) {
    event.preventDefault()
  }

  shouldComponentUpdate () {
    return true
  }

  render () {
    return (
      <div id='formContainer'>
        <h2>Forms:</h2>
        <Select options={formOptions} onChange={this.handleFormSelection} isHidden={this.state.isHidden} key />
      </div>
    )
  }
}