import styled from 'styled-components';
import * as React from 'react';

interface RoundProps {
    checked: boolean;
    styles: {
        checkedBackground: string;
        checkedColor: string;
        unCheckedBackground: string;
        unCheckedColor: string;
    }
}

const StyledSwitch = styled.div`
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
`;

const StyledInput = styled.input`
    opacity: 0;
    width: 0;
    height: 0;
`;

const StyledContent = styled.div<RoundProps>`
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: ${props => props.styles.unCheckedBackground};
    transition: .4s;
    border-radius: 34px;
    box-shadow: 1px 1px 3px 1px #8b8a8a;
    
    ${props => props.checked &&`
        background-color: ${props.styles.checkedBackground};
    `}

    &:hover{
        opacity: 0.9;
    }

    &:active {
        transform: scale(0.95);
    }

`;

const StyledRound = styled.span<RoundProps>`
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: ${props => props.styles.unCheckedColor};
    transition: .4s;
    border-radius: 34px;
    font-size: 30px;
    font-weight: bold;
    line-height: 15px;
    text-align: center;
    
    ${props => props.checked && `
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
        background-color: ${props.styles.checkedColor};
    `}
`;

export { StyledSwitch, StyledInput, StyledContent, StyledRound };