import Buttons from "@/components/basic/Buttons"
import { ButtonType } from "@/utils/types"
import { View, Text } from "@tarojs/components"
import { useState } from "react"
import PostBtn from "./PostBtn"
import './SpecBtns.scss'
import Taro from "@tarojs/taro"
import { useTranslation } from "react-i18next"
import { ColorType } from "@/context/themes/color"

export const rpxToPx = (n: number) => {
    var rate = Taro.getSystemInfoSync().windowWidth / 750;
    return n * rate;
}

export const StartFastBtn = (props: { onClick: Function, isLoading?: boolean }) => {
    const { t } = useTranslation()

    return (
        <PostBtn title={t('feature.track_time_duration.console.fast_start')} type={ButtonType.elevated}
            onClick={() => { props.onClick() }}
            btnStyle={{
                height: rpxToPx(100),
                borderRadius: rpxToPx(50),
                backgroundColor: global.fastColor ? global.fastColor : ColorType.fast,
                width: rpxToPx(320),
                // paddingLeft: 40,
                // paddingRight: 40,
                color: 'black',
                fontSize: 20,
                fontWeight: 'bold',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                // lineHeight:20
            }} />
    )
}

export const StartSleepBtn = (props: { onClick: Function, lowLight?: boolean, isLoading?: boolean }) => {
    const { t } = useTranslation()
    return (
        <PostBtn title={t('feature.track_time_duration.console.sleep_start')} type={ButtonType.elevated}
            onClick={() => { props.onClick() }}
            lowLight={props.lowLight ? props.lowLight : false}
            btnStyle={{
                height: rpxToPx(100),
                borderRadius: rpxToPx(50),
                backgroundColor: global.sleepColor ? global.sleepColor : ColorType.sleep,
                width: rpxToPx(320),
                // paddingLeft: 40,
                // paddingRight: 40,
                color: 'black',
                fontWeight: 'bold',
                fontSize: 20,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                // lineHeight:20
            }}
        />
    )
}

export const EndSleepBtn = (props: { onClick: Function, lowLight?: boolean, isLoading?: boolean }) => {
    const { t } = useTranslation()
    return (
        <PostBtn title={t('feature.track_time_duration.console.sleep_end')} type={ButtonType.outline}
            onClick={() => { props.onClick() }}
            lowLight={props.lowLight ? props.lowLight : false}
            lightLoading={true}
            btnStyle={{
                height: rpxToPx(100),
                borderRadius: rpxToPx(50),
                borderColor: global.sleepColor ? global.sleepColor : ColorType.sleep,
                borderWidth: 2,
                borderStyle: 'solid',
                width: rpxToPx(320),
                // paddingLeft: 40,
                // paddingRight: 40,
                color: global.sleepColor ? global.sleepColor : ColorType.sleep,
                fontWeight: 'bold',
                fontSize: 20,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                // lineHeight:20
            }}
        />
    )
}

export const EndFastBtn = (props: { onClick: Function, lowLight?: boolean, isLoading?: boolean }) => {
    const { t } = useTranslation()
    return (
        <PostBtn title={t('feature.track_time_duration.console.fast_end')} type={ButtonType.outline}
            onClick={() => { props.onClick() }}
            lowLight={props.lowLight ? props.lowLight : false}
            lightLoading={true}
            btnStyle={{
                height: rpxToPx(100),
                borderRadius: rpxToPx(50),
                borderColor: global.fastColor ? global.fastColor : ColorType.fast,
                borderWidth: 2,
                borderStyle: 'solid',
                width: rpxToPx(320),
                // paddingLeft: 40,
                // paddingRight: 40,
                color: global.fastColor ? global.fastColor : ColorType.fast,
                fontSize: 20,
                fontWeight: 'bold',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                // lineHeight:20
            }}
        />
    )
}

export const SetScheduleBtn = (props: { onClick: Function, title: string, isFast?: boolean, lowLight?: boolean, disable?: boolean }) => {
    return (
        <Buttons title={props.title} type={ButtonType.elevated}
            onClick={() => { props.onClick() }}
            lowLight={props.lowLight ? props.lowLight : false}
            disabled={props.disable}
            btnStyle={{
                height: 50,
                width: 300,
                boxSizing: 'border-box',
                borderRadius: 25,
                backgroundColor: props.isFast ? global.fastColor ? global.fastColor : ColorType.fast : global.sleepColor ? global.sleepColor : ColorType.sleep,
                paddingLeft: 40,
                paddingRight: 40,
                color: 'black',
                fontSize: 20,
                fontWeight: 'bold',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
            }}
        />
    )
}

export const ChooseScenarioBtn = (props: { onClick: Function, title: string, background: string }) => {
    return (
        <Buttons title={props.title} type={ButtonType.elevated}
            onClick={() => { props.onClick() }}
            btnStyle={{
                height: 50,
                width: 300,
                boxSizing: 'border-box',
                borderRadius: 25,
                backgroundColor: props.background,
                paddingLeft: 40,
                paddingRight: 40,
                color: 'black',
                fontSize: 20,
                fontWeight: 'bold',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
            }}
        />
    )
}

export const RecordMetricBtn = (props: { onClick: Function, title: string, themeColor: string, isDisable?: boolean }) => {
    return (
        <PostBtn title={props.title} type={ButtonType.elevated}
            onClick={() => { props.onClick() }}
            lowLight={props.isDisable}
            btnStyle={{
                height: 42,
                // width: 100,
                boxSizing: 'border-box',
                borderRadius: 21,
                backgroundColor: props.themeColor,
                color: 'black',
                fontSize: 20,
                fontWeight: 'bold',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
            }}
        />
    )
}