import CodeEditor from '@uiw/react-textarea-code-editor';
import { useEffect, useState } from 'react';
import { clsx } from 'clsx';

type Props = {
  value?: string;
  onChange?: (evn: React.ChangeEvent<HTMLTextAreaElement>) => void;
  readonly?: boolean;
  className?: string;
};
export const TextArea = (props: Props) => {
  const [code, setCode] = useState<string>('');
  useEffect(() => {
    setCode(props.value || '');
  }, []);
  return (
    <div className={clsx('min-h-16 max-h-52 overflow-scroll p-1')}>
      <CodeEditor
        value={code}
        language='js'
        readOnly={props.readonly}
        placeholder='Please enter JS code.'
        onChange={(evn) => setCode(evn.target.value)}
        padding={10}
        style={{
          backgroundColor: '#f5f5f5',
          fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
        }}
      />
    </div>
  );
};