instacart/Snacks

import React from 'react'
import PropTypes from 'prop-types'
import RadioCheckboxBase from '../../base/RadioCheckboxBase'
import colors from '../../styles/colors'
import ZeroSvg from '../../assets/zero.svg'
import OneSvg from '../../assets/one.svg'

const SWITCH_WIDTH = 36

const STYLES = {
  background: {
    borderRadius: '11px',
    position: 'relative',
    transition: 'background-color 200ms ease-in-out',
  },
  toggle: {
    default: {
      height: '18px',
      width: '18px',
      backgroundColor: colors.WHITE,
      borderRadius: '50%',
      display: 'block',
      position: 'absolute',
      top: '2px',
      left: '2px',
      transition: 'left 200ms ease-in-out',
    },
    selected: {
      left: '16px',
    },
  },
  zero: {
    position: 'absolute',
    right: '5px',
    top: '7px',
  },
  one: {
    position: 'absolute',
    left: '8px',
    top: '7px',
  },
}

const renderInputButton = (isSelected, style, displayOnOffLabel) => {
  return (
    <div style={[style, { backgroundColor: style.fill }, STYLES.background]}>
      {displayOnOffLabel && isSelected && <OneSvg style={STYLES.one} />}
      {displayOnOffLabel && !isSelected && <ZeroSvg style={STYLES.zero} />}
      <div style={[STYLES.toggle.default, isSelected && STYLES.toggle.selected]} />
    </div>
  )
}

const Switch = props => {
  return (
    <RadioCheckboxBase
      btnType="checkbox"
      width={SWITCH_WIDTH}
      renderInputButton={(isSelected, style) =>
        renderInputButton(isSelected, style, props.displayOnOffLabel)
      }
      {...props}
    />
  )
}

Switch.propTypes = {
  aria: PropTypes.shape({
    label: PropTypes.string,
  }),
  children: PropTypes.node,
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  isDisabled: PropTypes.bool,
  isSelected: PropTypes.bool,
  name: PropTypes.string,
  onChange: PropTypes.func,
  style: PropTypes.shape({
    button: PropTypes.object,
    label: PropTypes.object,
    wrapEl: PropTypes.object,
  }),
  value: PropTypes.string,
  wrapEl: PropTypes.string,
  displayOnOffLabel: PropTypes.bool,
}

export default Switch