import React from 'react'
import styled from 'styled-components'

import { colors } from '@auth0/cosmos/tokens'
import SearchBox from './search.js'
import List from './list'

/* import components from the generated metadata files */
import { metadata as components } from '@auth0/cosmos/meta/metadata.json'

const StyledSidebar = styled.div`
  background: ${colors.base.grayLightest};
  padding-bottom: calc(2rem + 80px);
`

class Sidebar extends React.Component {
  constructor() {
    super()
    /* by default, show all components */
    this.state = { filteredComponents: components, query: '' }
  }
  filter(query) {
    /* filter components based on search query */
    const filteredComponents = components.filter(component =>
      component.displayName.toLowerCase().includes(query.toLowerCase())
    )
    this.setState({ filteredComponents, query })
  }
  render() {
    return (
      <StyledSidebar>
        <SearchBox onChange={this.filter.bind(this)} />
        <List components={this.state.filteredComponents} query={this.state.query} />
      </StyledSidebar>
    )
  }
}

export default Sidebar
