import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { ToggleItemProps } from 'molecules/ToggleList/typings'
import { SwatchItemWrapper, ColorItemBox, ColorItemContent } from './styled'

@observer
class ColorSwatchItem extends React.Component<ToggleItemProps> {
  render() {
    const {
      className,
      label,
      value,
      isSelected,
      isDisabled,
      onClick,
    } = this.props
    // @todo renderIcon, renderLabel !!!
    // remainingProps are unused, need a standard for remaining

    const dataQa = isSelected === true ? 'qa-facet-selected' : 'qa-facet'
    return (
      <SwatchItemWrapper
        onClick={onClick}
        isDisabled={isDisabled}
        data-qa={dataQa}
      >
        <ColorItemBox isSelected={isSelected}>
          <ColorItemContent value={value} />
        </ColorItemBox>
      </SwatchItemWrapper>
    )
  }
}

export { ColorSwatchItem }
export default ColorSwatchItem