import React from 'react';

import { BuilderModule, Prop, PropFile } from '../../../@types/settings.js';
import getFileUrl from '../../utils/getFileUrl.js';

import './CtrlFile.scss';

type ControlProps = {
  updateProps: (id: string, path: string, value: any) => void;
  deleteProp: (path: string) => void;
  currMod: BuilderModule;
  updatePath: string;
  prop: PropFile;
  value: any;
  inheritVal?: boolean;
  setGalleryOpen: (formats: string[]) => void;
  setCurrentFile: (file: any) => void;
  setOnGalleryChange: (fn: (file: any) => void) => void;
};

export default function CtrlFile({
  currMod,
  updatePath,
  prop,
  value,
  inheritVal,
  deleteProp,
  updateProps,
  setGalleryOpen,
  setCurrentFile,
  setOnGalleryChange,
}: ControlProps) {
  return (
    <React.Fragment key={currMod.id + updatePath}>
      {prop.clearable !== false && value && !inheritVal && (
        <div
          className='ctrl-file__clear-btn'
          onClick={() => {
            updateProps(currMod.id, updatePath, null);
          }}
        >
          Clear
        </div>
      )}
      <div className={`ctrl-file__upload`}>
        <div
          className={`ctrl-file__upload__btn`}
          onClick={() => {
            setCurrentFile(value);
            setOnGalleryChange(() => (newFile: string) => {
              updateProps(currMod.id, updatePath, newFile);
            });
            setGalleryOpen(prop.accept ?? []);
          }}
        >
          {value &&
            (value.mime.includes('image') ? (
              <img
                className={`ctrl-file__upload__btn__img ${
                  ['.png', '.svg', '.eps'].includes(value.ext)
                    ? 'ctrl-file__upload__btn__img--object-contain'
                    : 'ctrl-file__upload__btn__img--object-cover'
                }`}
                alt={value.alternativeText}
                src={getFileUrl(value)}
              />
            ) : (
              <div className='ctrl-file__upload__btn__file'>
                <div className='ctrl-file__upload__btn__file__name'>
                  {value.name.split('.')[0].length > 100 ? (
                    <span title={value.name}>
                      {value.name.split('.')[0].slice(0, 10)}...
                    </span>
                  ) : (
                    value.name.split('.')[0]
                  )}
                </div>
                <div className='ctrl-file__upload__btn__file__ext'>
                  {value.ext}
                </div>
                <div className='ctrl-file__upload__btn__file__size'>
                  {value.size < 1000
                    ? Math.round(value.size) + ' KB'
                    : Math.round(value.size / 100) / 10 + ' MB'}
                </div>
              </div>
            ))}
          {value && (
            <div className={`ctrl-file__upload__btn__active-box`}></div>
          )}
          <i
            className={`ctrl-file__upload__btn__icon fa-solid fa-sharp fa-circle-plus ${
              value ? '' : 'ctrl-file__upload__btn__icon--empty'
            }`}
          />
        </div>
      </div>
    </React.Fragment>
  );
}
