import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { c } from 'ttag';
import { CircularProgress, Dropdown, Icon, generateUID, useUser, usePopperAnchor } from 'react-components';
import humanSize from 'proton-shared/lib/helpers/humanSize';
import { classnames } from '../../helpers/component';

const StorageSpaceStatus = ({ children }) => {
    const [{ MaxSpace, UsedSpace }] = useUser();
    const [uid] = useState(generateUID('dropdown'));
    const { anchorRef, isOpen, toggle, close } = usePopperAnchor();

    // round with 0.01 precision
    const usedPercent = Math.round((UsedSpace / MaxSpace) * 10000) / 100;
    const maxSpaceFormatted = humanSize(MaxSpace);
    const usedSpaceFormatted = humanSize(UsedSpace);
    const color =
        usedPercent < 60
            ? 'circle-bar--global-success'
            : usedPercent < 80
            ? 'circle-bar--global-attention'
            : 'circle-bar--global-warning';

    return (
        <>
            <button type="button" aria-describedby={uid} onClick={toggle} ref={anchorRef}>
                <CircularProgress progress={usedPercent} className={color}>
                    <text
                        className="circle-chart__percent fill-white"
                        x="16.91549431"
                        y="21"
                        fontFamily="Constantia"
                        textAnchor="middle"
                        alignmentBaseline="central"
                    >
                        i
                    </text>
                </CircularProgress>
                <span className="smallest mt0 mb0-5 mlauto mrauto lh100 circle-chart-info opacity-40 bl">
                    {usedSpaceFormatted}
                </span>
            </button>

            <Dropdown
                id={uid}
                isOpen={isOpen}
                anchorRef={anchorRef}
                onClose={close}
                originalPlacement="right-bottom"
                size="auto"
            >
                <div className="dropDown-content">
                    <div className="absolute top-right mt0-5 mr0-5">
                        <button className="flex flex-items-center">
                            <Icon name="close" />
                        </button>
                    </div>
                    <div className="flex p1">
                        <div className="pr1 flex flex-items-center">
                            <div className="relative">
                                <CircularProgress
                                    progress={usedPercent}
                                    size={100}
                                    className={classnames(['circle-chart__background--bigger', color])}
                                />
                                <span className="centered-absolute">{usedPercent}%</span>
                            </div>
                        </div>
                        <div className="w150p">
                            <b className="flex">{c('Title').t`Storage`}</b>
                            <small>{c('Info').jt`${usedSpaceFormatted} of ${maxSpaceFormatted} used`}</small>
                            <div className="mb1">
                                <span className="opacity-50 small">
                                    {c('Info').t`Your storage space is shared across all Proton products.`}
                                </span>
                            </div>
                            {children}
                        </div>
                    </div>
                </div>
            </Dropdown>
        </>
    );
};

StorageSpaceStatus.propTypes = {
    children: PropTypes.node
};

export default StorageSpaceStatus;

@@ -1172,36 +1172,111 @@
    %3C
-text%0A                       
+g className=%22circle-chart__info%22%3E%0A                        %3Crect x=%2217%22 y=%2214%22 width=%221.55%22 height=%229.1%22
  cla
@@ -1316,16 +1316,18 @@
 l-white%22
+/%3E
 %0A       
@@ -1347,273 +1347,125 @@
     
-x=%2216.91549431%22%0A                       
+%3Crect x=%2217%22
  y=%22
-21%22%0A                        fontFamily=%22Constantia%22%0A                        textAnchor=%22middle%22%0A                        alignmentBaseline=%22central%22%0A                    %3E%0A                        i%0A                    %3C/text
+11%22 width=%221.55%22 height=%221.53%22 className=%22circle-chart__percent fill-white%22/%3E%0A                    %3C/g
 %3E%0A  

Fix storage space icon (#359)