import React, { Fragment, useCallback, useEffect, useState } from 'react';
import Styled from 'styled-components/native';
import Theme from '~/Themes';
import { ActivityIndicator, Keyboard, TouchableOpacity, View } from 'react-native';
import { isTrue } from './Common';

const ContainerStyle = `
    flex-direction: row;
    flex:1;
    height: 40px;
    border: 1px solid #b9bac4;
    border-radius: 5px;
    align-items: center;
    padding-left: 19px;
    padding-right: 0px;
    overflow: hidden;
`;
const SelectButtonLabel = Styled.Text`
    font-size: 16px;
    font-family: ${Theme.Fonts.Regular};
    include-font-padding: false;
    align-items: center;
    color: #43425d;
    flex: 1;
`;
const SelectButtonDefaultLabel = Styled(SelectButtonLabel)`
    color: #9aa3ac;
`;
const Button = Styled.View`
    flex-direction: row;
    width: 81px;
    height: 100%;
    background-color: #9aa3ac;
    border: 0px;
    border-left-width: 1px;
    border-color: #b9bac4;
    justify-content: center;
    align-items: center;
`;
const ButtonLabel = Styled.Text`
    font-size: 14;
    font-family: ${Theme.Fonts.Regular};
    include-font-padding: false;
    line-height: 16;
    letter-spacing:-1.2;
    color: #ffffff;
`;
export const SelectButton = ({
        style={}, selectedLabel='', defaultLabel='선택', 
        onPress=()=>{}, editable=true
    }) => {

    const Container = editable ? Styled(TouchableOpacity)`${ContainerStyle}` : Styled(View)`${ContainerStyle}`;
    const borderStyle = isTrue(editable) ? { borderColor: Theme.COLORS.EDITABLE_BORDER } : { borderColor: Theme.COLORS.READONLY_BORDER };
    const backgroundStyle = isTrue(editable) ? { backgroundColor: Theme.COLORS.EDITABLE_BACKGROUND } : { backgroundColor: Theme.COLORS.READONLY_BACKGROUND };

    return (
        <Container style={[backgroundStyle, borderStyle, style]} onPress={() => { if(editable) { onPress() } }}>
            {!selectedLabel ? (
                <SelectButtonDefaultLabel numberOfLines={1} ellipsizeMode="tail">{editable ? defaultLabel : ""}</SelectButtonDefaultLabel>
            ) : (
                <SelectButtonLabel numberOfLines={1} ellipsizeMode="tail">{selectedLabel}</SelectButtonLabel>
            )}
            {editable && <Button><ButtonLabel>선택</ButtonLabel></Button>}
        </Container>
    )
};
