import React, { useState, useEffect } from 'react';
import Styled from 'styled-components/native';
import { Checkbox as GalioCheckbox } from 'galio-framework';
import { StyleSheet, View } from 'react-native';
import Theme from '~/Themes';
import Icon from './Icon';

const styles = StyleSheet.create({
    labelStyle: {
        fontFamily: Theme.Fonts.Regular,
        fontSize: 16,
        lineHeight: 25,
        color: '#43425d',
        paddingTop: 1,
        paddingLeft: 0,
    }
});

const Container = Styled.TouchableOpacity`
    width: auto;
    flex-direction: row;
    align-items: center;
    margin-right: 6;
`;
const IconContainer = Styled.View`
    width: 20;
    height: 20;
    border: 1px solid #3b86ff;
    border-radius: 4;
    align-items: center;
    justify-content: center;
    overflow: hidden;
`;
const Label = Styled.Text`
    font-family: ${Theme.Fonts.Regular};
    font-size: 16;
    line-height: 25;
    color: #43425d;
    margin-left: 6;
`;

const defaultOnChange = (checked) => {};
const defaultOnPress = () => {};
export default Checkbox = ({label, labelStyle, color="#3b86ff", hasState=true, initialValue=false, value, onChange=defaultOnChange, editable=true, disabled=false, style}) => {
    const [checked, setChecked] = useState(initialValue);

    useEffect(() => {
        if(typeof value !== 'undefined') {
            if(hasState) setChecked(value);
        }
    }, [value]);

    let realChecked = (hasState ? checked : value);
    if(typeof realChecked === 'undefined') realChecked = false;

    return (
        <Container style={style} onPress={() => {
            if(editable && !disabled) {
                if(hasState) {
                    setChecked(!checked);
                    onChange(!checked);
                } else {
                    onChange(!value);
                }
            }
        }}>
            <IconContainer style={[{borderColor:color}, (realChecked?{backgroundColor:color}:{})]}>
                {realChecked && (
                    <Icon iconFamily="AntDesign" iconName="check" size={14} color="white" />
                )}
            </IconContainer>
            <Label>{label}</Label>
        </Container>
    )
};


/*

import React from 'react';
import Styled from 'styled-components/native';
import { Checkbox as GalioCheckbox } from 'galio-framework';
import { StyleSheet } from 'react-native';
import Theme from '~/Themes';

const styles = StyleSheet.create({
    labelStyle: {
        fontFamily: Theme.Fonts.Regular,
        fontSize: 16,
        lineHeight: 25,
        color: '#43425d',
        paddingTop: 1,
        paddingLeft: 0,
    }
});

const Container = Styled.View`
    flex-direction: row;
    align-items: center;
`;
const Label = Styled.Text`
    font-
`;

export default Checkbox = ({labelStyle, color="#3b86ff", initialValue=false, onChange=()=>{}, ...rest}) => {
    return (
        <GalioCheckbox labelStyle={{...styles.labelStyle, ...labelStyle}} color={color} initialValue={initialValue} onChange={onChange} {...rest} />
    )
};


*/