import { SchemaFieldProps, UploadField as UploadFieldType } from '@vev/utils';
import React from 'react';
import { SilkeBox } from '../../silke-box';
import { SilkeTextSmall } from '../../silke-text';
import { SilkeUploadField } from '../../silke-upload-field';
import { startCase } from 'lodash';

const UploadField = (props: SchemaFieldProps<UploadFieldType>) => {
  const { schema, onChange, disabled, readonly } = props;
  const maxSize = schema.maxSize || 1024 * 100;

  return (
    <SilkeBox column flex vPad="s">
      <SilkeTextSmall weight="strong">{schema.title || startCase(schema.name)}</SilkeTextSmall>
      <SilkeBox column>
        <SilkeUploadField
          accept={schema.accept}
          disabled={disabled}
          readOnly={readonly}
          multiple={false}
          dropzoneStyle={{ width: '100%' }}
          fileItemStyle={{ width: '100%' }}
          size="xs"
          help={schema.description}
          maxSize={Math.min(76800, maxSize)} // Set absolute max size to 75 MB
          name={props.schema.name}
          value={props.value}
          useFileModel
          onChange={(res) => {
            onChange(res);
          }}
        />
      </SilkeBox>
    </SilkeBox>
  );
};

export default UploadField;