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"

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

    return (
        <PostBtn title="开始断食" type={ButtonType.elevated}
            onClick={() => { props.onClick() }}
            btnStyle={{
                height: 50,
                borderRadius: 25,
                backgroundColor: '#AAFF00',
                width:160,
                // paddingLeft: 40,
                // paddingRight: 40,
                color: 'black',
                fontSize: 20,
                fontWeight:500,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                // lineHeight:20
            }} />
    )
}

export const StartSleepBtn = (props: { onClick: Function, lowLight?: boolean, isLoading?: boolean }) => {
    return (
        <PostBtn title="开始睡眠" type={ButtonType.elevated}
            onClick={() => { props.onClick() }}
            lowLight={props.lowLight ? props.lowLight : false}
            btnStyle={{
                height: 50,
                borderRadius: 25,
                backgroundColor: '#00FFFF',
                width:160,
                // paddingLeft: 40,
                // paddingRight: 40,
                color: 'black',
                fontWeight:500,
                fontSize: 20,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                // lineHeight:20
            }}
        />
    )
}

export const EndSleepBtn = (props: { onClick: Function, lowLight?: boolean, isLoading?: boolean }) => {
    return (
        <PostBtn title="结束睡眠" type={ButtonType.outline}
            onClick={() => { props.onClick() }}
            lowLight={props.lowLight ? props.lowLight : false}
            btnStyle={{
                height: 50,
                borderRadius: 25,
                borderColor: '#00FFFF',
                borderWidth: 2,
                borderStyle: 'solid',
                width:160,
                // paddingLeft: 40,
                // paddingRight: 40,
                color: '#00FFFF',
                fontWeight:500,
                fontSize: 20,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                // lineHeight:20
            }}
        />
    )
}

export const EndFastBtn = (props: { onClick: Function, lowLight?: boolean, isLoading?: boolean }) => {
    return (
        <PostBtn title="结束断食" type={ButtonType.outline}
            onClick={() => { props.onClick() }}
            lowLight={props.lowLight ? props.lowLight : false}
            btnStyle={{
                height: 50,
                borderRadius: 25,
                borderColor: '#AAFF00',
                borderWidth: 2,
                borderStyle: 'solid',
                width:160,
                // paddingLeft: 40,
                // paddingRight: 40,
                color: '#AAFF00',
                fontSize: 20,
                fontWeight:500,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                // lineHeight:20
            }}
        />
    )
}

export const SetScheduleBtn = (props: { onClick: Function, title: string, isFast?: boolean, lowLight?: boolean }) => {
    return (
        <Buttons title={props.title} type={ButtonType.elevated}
            onClick={() => { props.onClick() }}
            lowLight={props.lowLight ? props.lowLight : false}
            btnStyle={{
                height: 50,
                width: 300,
                boxSizing: 'border-box',
                borderRadius: 25,
                backgroundColor: props.isFast ? '#AAFF00' : '#00FFFF',
                paddingLeft: 40,
                paddingRight: 40,
                color: 'black',
                fontSize: 20,
                fontWeight:500,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
            }}
        />
    )
}

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