import {countTools} from "@yoronsoft/js-utils";
import * as React from "react";
import {ColorValue, StyleSheet} from "react-native";
import app, {ThemeCss} from "../../app";
import BasicView from "../view";
import BasicText from "../text";

type IProps = {
    readonly width: number
    height?: number
    borderRadius?: number
    bg?: ColorValue
    selectBg?: ColorValue

    isProgress?: boolean
    progress: number
    progressColor?: ColorValue
    progressSize?: number

    isText?: boolean
    text?: string
    textColor?: ColorValue
    textSize?: number
}

const BasicProgress: React.FC<IProps> = (props) => {
    const css = app.theme.useGet<ThemeCss>();
    const styles = styleSheet(css);

    const width = countTools.multipliedBy(props.width, props.progress > 0 ? (Number(props.progress) / 100) : 0.01);
    const height = props.height ?? 4;
    const borderRadius = typeof props.borderRadius === "number" ? props.borderRadius : 2;

    const bg = props.bg ?? css.app.bg;
    const selectBg = props.selectBg ?? css.main;

    const isProgress = props.isProgress ?? false;
    const progressColor = props.progressColor ?? css.color.white;
    const progressSize = props.progressSize ?? 14;

    const isText = props.isText ?? false;
    const text = props.text;
    const textColor = props.textColor ?? css.font.color;
    const textSize = props.textSize ?? 14;

    return <BasicView width={props.width} height={height} style={[styles.view, {borderRadius, backgroundColor: bg}]}>
        {
            isProgress && props.progress > 0 ?
                <BasicView width={Math.round(width)} height={height}
                           style={[styles.progress, {
                               backgroundColor: selectBg,
                               borderColor: selectBg,
                           }]}>
                    {
                        isProgress ?
                            <BasicText text={`${props.progress}%`} color={progressColor} size={progressSize}
                                       lineHeight={height} l={10}/> :
                            undefined
                    }
                </BasicView>
                :
                isText ?
                    <BasicText text={text} color={textColor} size={textSize} lineHeight={height} l={10}/> : undefined
        }

    </BasicView>
}

const styleSheet = (css: ThemeCss) => StyleSheet.create({
    view: {
        overflow: 'hidden',
    },
    progress: {
        borderWidth: 0.5,
        borderColor: css.main,
        backgroundColor: css.main,
    },
});

export default BasicProgress