import React from 'react'
import { Row } from 'atoms/Row'
import { Text } from 'atoms/Text'
import {
  ActiveOption,
  ActiveOptionProps,
  SelectText,
} from 'molecules/SelectDropDown'
import { list as storeHoursList } from './fixture'
import { StyledSelectDropDown, StyledSelectText, StoreOption } from './styled'
import { StoreHoursDropDownProps } from './typings'

const renderActiveItem = (props: ActiveOptionProps) => (
  <ActiveOption {...props} label="Store Hours" />
)
const renderItem = (itemProps, state) => {
  // console.log('[selectDropDown] renderItem', itemProps)
  const { label, list, ...remainingProps } = itemProps
  const hoursView = list.map(item => {
    const { day, hours } = item
    // console.log('[Hours__Days]', item)
    return (
      <Row key={day}>
        <SelectText>{day}</SelectText>
        <SelectText>{hours}</SelectText>
      </Row>
    )
  })
  const selectText = <SelectText>{label}</SelectText>
  return (
    <StoreOption key={label} {...remainingProps}>
      {selectText}
      {hoursView}
    </StoreOption>
  )
}

class StoreHoursDropDown extends React.PureComponent<StoreHoursDropDownProps> {
  static defaultProps = {
    className: '',
    options: storeHoursList,
  }
  render() {
    return (
      <StyledSelectDropDown
        renderActiveItem={renderActiveItem}
        renderItem={renderItem}
        {...this.props}
      />
    )
  }
}

export { StoreHoursDropDown }
export default StoreHoursDropDown