<commit_before>////////////////////////////////////////////////////////////////////////////////
// Exercise:
//
// Using Recompose and the container/presentational component pattern:
// - Render a tab for each country with its name in the tab
// - Make it so that you can click on a tab and it will appear active
//   while the others appear inactive. (Hint: this will require withState and withHandlers)
// - Make it so the panel renders the correct content for the selected tab
//
// Don't forget to refer to the recompose docs!
// https://github.com/acdlite/recompose/blob/master/docs/API.md
//
// Got extra time?
//
// - Make <Tabs> generic so that it doesn't know anything about
//   country data (Hint: good propTypes help)
////////////////////////////////////////////////////////////////////////////////
import React from 'react'
import pt from 'prop-types'
import { compose, withState, withHandlers } from 'recompose'
import classnames from 'classnames'
import './index.scss'

const TabComponent = ({ content, style, onClick, isActive }) => {
  const classNames = classnames('tab', { active: isActive })
  return (
    <div className={classNames} onClick={onClick}>
      {content}
    </div>
  )
}

TabComponent.propTypes = {
  content: pt.string.isRequired,
  onClick: pt.func.isRequired,
  isActive: pt.bool,
}

const Tab = withHandlers({
  onClick: ({ index, onClickUpdateIndex }) => () => onClickUpdateIndex(index),
})(TabComponent)

const TabsComponent = ({ data, activeTabIndex, updateActiveTabIndex }) => {
  const tabs = data.map((country, index) => {
    const isActive = index === activeTabIndex
    return (
      <Tab
        key={country.id}
        index={index}
        isActive={isActive}
        content={country.name}
        onClickUpdateIndex={updateActiveTabIndex}
      />
    )
  })
  const activeCountry = data[activeTabIndex]
  const content = activeCountry && activeCountry.description
  return (
    <div className="tabs">
      {tabs}
      <div className="panel">
        {content}
      </div>
    </div>
  )
}

TabsComponent.propTypes = {
  data: pt.array.isRequired,
  activeTabIndex: pt.number.isRequired,
  updateActiveTabIndex: pt.func.isRequired,
}

const Tabs = compose(
  withState('activeTabIndex', 'updateActiveTabIndex', 0),
  withHandlers({
    selectTabIndex: ({ updateActiveTabIndex }) => activeTabIndex => {
      updateActiveTabIndex(activeTabIndex)
    },
  }),
)(TabsComponent)

const defaultState = [<commit_msg>Make Tabs component generic and not specific to countries, in StateAsProps lesson.<commit_after>////////////////////////////////////////////////////////////////////////////////
// Exercise:
//
// Using Recompose and the container/presentational component pattern:
// - Render a tab for each country with its name in the tab
// - Make it so that you can click on a tab and it will appear active
//   while the others appear inactive. (Hint: this will require withState and withHandlers)
// - Make it so the panel renders the correct content for the selected tab
//
// Don't forget to refer to the recompose docs!
// https://github.com/acdlite/recompose/blob/master/docs/API.md
//
// Got extra time?
//
// - Make <Tabs> generic so that it doesn't know anything about
//   country data (Hint: good propTypes help)
////////////////////////////////////////////////////////////////////////////////
import React from 'react'
import pt from 'prop-types'
import { compose, withState, withHandlers } from 'recompose'
import classnames from 'classnames'
import './index.scss'

const TabComponent = ({ content, style, onClick, isActive }) => {
  const classNames = classnames('tab', { active: isActive })
  return (
    <div className={classNames} onClick={onClick}>
      {content}
    </div>
  )
}

TabComponent.propTypes = {
  content: pt.string.isRequired,
  onClick: pt.func.isRequired,
  isActive: pt.bool,
}

const Tab = withHandlers({
  onClick: ({ index, onClickUpdateIndex }) => () => onClickUpdateIndex(index),
})(TabComponent)

const TabsComponent = ({ data, activeTabIndex, updateActiveTabIndex }) => {
  const tabs = data.map((tab, index) => {
    const isActive = index === activeTabIndex
    return (
      <Tab
        key={tab.id}
        index={index}
        isActive={isActive}
        content={tab.name}
        onClickUpdateIndex={updateActiveTabIndex}
      />
    )
  })
  const activeTab = data[activeTabIndex]
  const content = activeTab && activeTab.description
  return (
    <div className="tabs">
      {tabs}
      <div className="panel">
        {content}
      </div>
    </div>
  )
}

TabsComponent.propTypes = {
  data: pt.array.isRequired,
  activeTabIndex: pt.number.isRequired,
  updateActiveTabIndex: pt.func.isRequired,
}

const Tabs = compose(
  withState('activeTabIndex', 'updateActiveTabIndex', 0),
  withHandlers({
    selectTabIndex: ({ updateActiveTabIndex }) => activeTabIndex => {
      updateActiveTabIndex(activeTabIndex)
    },
  }),
)(TabsComponent)

const defaultState = [
{'fraction_non_alphanumeric': 0.1781344032096289, 'fraction_numerical': 0.00040120361083249747, 'mean_word_length': 2.642074506939372, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 33, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1769892', 'n_tokens_mistral': 1372, 'n_tokens_neox': 1382, 'n_words': 407}