import React, { PropsWithChildren, useState } from 'react'

import { TextArea, getTextCount, FormItem } from 'react-icecream'

const longText = 'We all want to have codebases that are easy to maintain, so we start out with the best of intentions to make our codebase (or our corner of the codebase) maintainable and easy to understand. Over time, as a codebase grows, it can become more and more difficult to manage dependencies (JS, CSS, images, etc.). As projects grow, an increasing amount of your codebase becomes "tribal knowledge" (knowledge that only you or a few others are privy to) and this sort of knowledge contributes to "technical debt" (whether that term is accurate or not).'

export default function Demo() {
  return (
    <>
      <Line>
        <TextArea placeholder="请输入" />
      </Line>
      <Line>
        <TextArea disabled defaultValue="I'm disabled" maxCount={1000} value={longText} />
      </Line>
      <Line>
        <TextArea autoSize defaultValue="I'm auto-sized" />
      </Line>
      <Line>
        <ComplexTextArea />
      </Line>
    </>
  )
}

function ComplexTextArea() {
  const [value, setValue] = useState('So we start out with the best of intentions to make our codebase (or our corner of the codebase) maintainable and easy to understand.')
  const maxCount = 100
  const error = getTextCount(value) > maxCount ? '长度超出限制' : null
  return (
    <FormItem label="复杂文本域" validateStatus={error ? 'error' : 'success'} validateMessage={error}>
      <TextArea
        maxCount={maxCount}
        autoSize={{ minRows: 2, maxRows: 4 }}
        value={value}
        onChange={setValue}
      />
    </FormItem>
  )
}

function Line({ children }: PropsWithChildren<{}>) {
  return <div style={{ marginBottom: '1em' }}>{children}</div>
}