// @flow
import * as React from 'react';

type Props = {
  // --- select ---
  diskSpace: DiskSpace, // KB
  viewHostingLimit: number, // MB
  autoHostingLimit: number,
  viewBlobSpace: number,
  autoBlobSpace: number,
  privateBlobSpace: number,
};

function StorageViz(props: Props) {
  const { diskSpace, viewHostingLimit, autoHostingLimit, viewBlobSpace, autoBlobSpace, privateBlobSpace } = props;

  if (!diskSpace || !diskSpace.total) {
    return (
      <div className={'storage__wrapper'}>
        <div className={'storage__bar'}>
          <div className="help">Cannot get disk space information.</div>
        </div>
      </div>
    );
  }

  const totalMB = diskSpace && Math.floor(Number(diskSpace.total) / 1024);
  const freeMB = diskSpace && Math.floor(Number(diskSpace.free) / 1024);
  const otherMB = totalMB - (freeMB + viewBlobSpace + autoBlobSpace + privateBlobSpace);
  const autoFree = autoHostingLimit - autoBlobSpace;
  const viewFree = viewHostingLimit > 0 ? viewHostingLimit - viewBlobSpace : freeMB - autoFree;
  const unallocFree = freeMB - viewFree - autoFree;
  const viewLimit =
    viewHostingLimit === 0
      ? freeMB - (autoHostingLimit - autoBlobSpace) + viewBlobSpace
      : viewHostingLimit + viewBlobSpace;

  const getPercent = (val, lim = totalMB) => (val / lim) * 100;
  const getGB = (val) => (Number(val) / 1024).toFixed(2);

  const otherPercent = getPercent(otherMB);
  const privatePercent = getPercent(privateBlobSpace);
  const autoLimitPercent = getPercent(autoHostingLimit);
  const viewLimitPercent = getPercent(viewLimit);
  const viewUsedPercentOfLimit = getPercent(viewBlobSpace, viewLimit);
  const autoUsedPercentOfLimit = getPercent(autoBlobSpace, autoHostingLimit);

  return (
    <div className={'storage__wrapper'}>
      <div className={'storage__bar'}>
        <div className={'storage__other'} style={{ width: `${otherPercent}%` }} />
        <div className={'storage__private'} style={{ width: `${privatePercent}%` }} />
        <div className={'storage__auto'} style={{ width: `${autoLimitPercent}%` }}>
          <div className={'storage__auto--used'} style={{ width: `${autoUsedPercentOfLimit}%` }} />
          <div className={'storage__auto--free'} />
        </div>
        <div className={'storage__viewed'} style={{ width: `${viewLimitPercent}%` }}>
          <div className={'storage__viewed--used'} style={{ width: `${viewUsedPercentOfLimit}%` }} />
          <div className={'storage__viewed--free'} />
        </div>
        {viewHostingLimit !== 0 && <div style={{ 'background-color': 'unset' }} />}
      </div>
      <div className={'storage__legend-wrapper'}>
        <div className={'storage__legend-item'}>
          <div className={'storage__legend-item-swatch storage__legend-item-swatch--private'} />
          <div className={'storage__legend-item-label'}>
            <label>Publishes</label>
            <div className={'help'}>{`${getGB(privateBlobSpace)} GB`}</div>
          </div>
        </div>
        <div className={'storage__legend-item'}>
          <div className={'storage__legend-item-swatch storage__legend-item-swatch--auto'} />
          <div className={'storage__legend-item-label'}>
            <label>Auto Hosting</label>
            <div className={'help'}>
              {autoHostingLimit === 0 ? __('Disabled') : `${getGB(autoBlobSpace)} of ${getGB(autoHostingLimit)} GB`}
            </div>
          </div>
        </div>
        <div className={'storage__legend-item'}>
          <div className={'storage__legend-item-swatch storage__legend-item-swatch--viewed'} />
          <div className={'storage__legend-item-label'}>
            <label>View Hosting</label>
            <div className={'help'}>
              {viewHostingLimit === 1
                ? __('Disabled')
                : `${getGB(viewBlobSpace)} of ${
                    viewHostingLimit !== 0 ? getGB(viewHostingLimit) : `${getGB(viewFree)} Free`
                  } GB`}
            </div>
          </div>
        </div>
        {viewHostingLimit !== 0 && (
          <div className={'storage__legend-item'}>
            <div className={'storage__legend-item-swatch storage__legend-item-swatch--free'} />
            <div className={'storage__legend-item-label'}>
              <label>Free</label>
              <div className={'help'}>{`${getGB(unallocFree)} GB`}</div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

export default StorageViz;