import useNewToken from "@/Hook/useNewToken"
import { txtLength } from "@/utils/utils"
import { Input } from "antd"
import { TextAreaProps } from "antd/es/input"
import React from "react"



const TextAreaByteLength: React.FC<TextAreaProps> = ({ maxLength, showCount, value, onChange, ...props }) => {

    /***********************/
    const { token } = useNewToken()
    /***********************/

    return <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%', gap: 4, paddingRight: 4, boxSizing: 'border-box', border: `1px solid ${(maxLength && txtLength(value?.toString()) > maxLength) ? token.colorErrorBorderHover : token.colorBorder}`, borderRadius: token.borderRadius }}>
        <Input.TextArea maxLength={maxLength} value={value} onChange={onChange} {...props} style={{ maxWidth: (showCount && maxLength) ? "calc(100% - 45px)" : '100%' }} variant="borderless" />
        {(showCount && maxLength) && <span style={(maxLength && txtLength(value?.toString()) > maxLength) ? { color: token.colorErrorBorderHover } : {}}>{txtLength(value?.toString())} / {maxLength}</span>}
    </div>
}

export default React.memo(TextAreaByteLength)