import { Input as AntInput } from 'antd';
import { useStatus } from 'client/hooks/useStatus';
import { useStoreValue } from 'client/hooks/useStoreValue';
import { Status } from 'core/types/elements';
import { observer } from 'mobx-react';
import React from 'react';

const TextArea = ({
  name,
  readonly,
  placeholder,
  valueName,
  computedValue
}) => {
  const { value, setCurrentValue } = useStoreValue({
    computedValue,
    valueName
  });
  const { status } = useStatus(name);

  return (
    <AntInput.TextArea
      style={{
        height: '200px',
      }}
      disabled={status === Status.Disabled}
      readOnly={readonly}
      placeholder={placeholder}
      value={value}
      onChange={e => setCurrentValue(e.target.value)}
    />
  );
};

export default observer(TextArea);