import React, { useState, useEffect } from 'react'

import PropTypes from 'prop-types'

import _ from 'lodash'

import classnames from 'classnames'

import './index.less'

function CheckBox(props) {

  const {

    style, checked: propsChecked, content, onChange, theme,

  } = props

  const wrapperStyle = _.assign({}, style)

  const [checked, setChecked] = useState(propsChecked === true)

  useEffect(() => {

    setChecked(propsChecked)

  }, [propsChecked])

  return (

    <div

      className={classnames({

        'single-checkbox-component-wrap': true,

        'theme-dark': theme === 'dark',

        checked: checked === true,

      })}

      onClick={() => {

        const nextState = !checked

        setChecked(nextState)

        onChange(nextState)

      }}

      role="button"

      tabIndex={0}

      style={wrapperStyle}

    >

      <span className="icon" />

      <span className="tip">{ content }</span>

    </div>

  )

}

CheckBox.propTypes = {

  style: PropTypes.object,

  checked: PropTypes.bool,

  content: PropTypes.string.isRequired,

  onChange: PropTypes.func,

  theme: PropTypes.string,

}

CheckBox.defaultProps = {

  style: {},

  checked: false,

  onChange: _.noop,

  theme: 'normal',

}

export default CheckBox

.single-checkbox-component-wrap {

  display: flex;

  justify-content: flex-start;

  align-items: center;

  cursor: pointer;

  &.checked {

    .icon {

      background-image: url(~ROOT/shared/assets/image/icon-checkbox-checked-30-30.png);

    }

  }

  .icon {

    display: inline-block;

    box-sizing: border-box;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background-image: url(~ROOT/shared/assets/image/icon-checkbox-unchecked-30-30.png);

    background-size: 10px;

  }

  .tip {

    font-size: 12px;

    color: #364152;

    opacity: 0.4;

    line-height: 18px;

    margin-left: 3px;

  }

}

.single-checkbox-component-wrap {

  &.theme-dark {

    &.checked {

      .icon {

        background-image: url(~ROOT/shared/assets/image/icon-checkbox-checked-white-30-30.png);

      }

    }

    .icon {

      background-image: url(~ROOT/shared/assets/image/icon-checkbox-unchecked-white-30-30.png);

    }

    .tip {

      color: #ffffff;

    }

  }

}