import React from 'react'
import styled, { css } from 'react-emotion';
import ReactToggled from 'react-toggled';
import { colors, colorsRaw, shadows, transitions } from './styles';

const ToggleContainer = styled.span`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 20px;
  cursor: pointer;
`

const ToggleHandle = styled.span`
  ${shadows.dropDeep};
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: ${colorsRaw.white};
  transition: transform ${transitions.main};

  ${props => props.isActive && css`
    transform: translateX(20px);
  `}
`

const ToggleBackground = styled.span`
  width: 34px;
  height: 14px;
  border-radius: 10px;
  background-color: ${colors.active};
`

const Toggle = ({
  active,
  onChange,
  renderBackground,
  onFocus,
  onBlur,
  Container = ToggleContainer,
  Background = ToggleBackground,
  Handle = ToggleHandle,
}) => (
  <ReactToggled on={active} onToggle={onChange}>
    {({on, getElementTogglerProps}) => (
      <Container
        role="switch"
        aria-checked={on.toString()}
        onFocus={onFocus}
        onBlur={onBlur}
        {...getElementTogglerProps()}
      >
        <Background isActive={on}/>
        <Handle isActive={on}/>
      </Container>
    )}
  </ReactToggled>
);

const StyledToggle = styled(Toggle)``;

export { StyledToggle as default, ToggleContainer, ToggleBackground, ToggleHandle };