import { StyledInput, StyledRound, StyledSwitch, StyledContent } from './styled-switch';
import * as React from 'react';

interface Props {
    name: string;
    label?: string;
    checked: boolean;
    disabled?: boolean;
    onChange: () => void;
    styles: {
        checkedBackground: string;
        unCheckedBackground: string;
        checkedColor: string;
        unCheckedColor: string;
    },
    checkedIcon?: React.ReactNode;
    unCheckedIcon?: React.ReactNode;
    style?: React.CSSProperties;
}

const Switch = (props: Props) => (
    <StyledSwitch
        style={props.style}
        onClick={props.onChange}
    >
        <StyledInput
            name={props.name}
            checked={props.checked}
            onChange={props.onChange}
        />
        <StyledContent
            checked={props.checked}
            styles={props.styles}
        >
            <StyledRound
                checked={props.checked}
                styles={props.styles}
            >

                {props.checked && props.checkedIcon &&
                        <>
                            {props.checkedIcon}
                        </>
                }
                {!props.checked && props.unCheckedIcon &&
                        <>
                            {props.unCheckedIcon}
                        </>
                }
            </StyledRound>
        </StyledContent>
    </StyledSwitch>
);

Switch.defaultProps = {
    styles: {
        checkedBackground: 'white',
        checkedColor: 'green',
        unCheckedBackground: 'white',
        unCheckedColor: 'red',
    },
};

export default Switch;