import CodeEditor from '@uiw/react-textarea-code-editor';

import { useEffect, useState } from 'react';
import { clsx } from 'clsx';

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