"use client"
import React from 'react';
import './storage.css'
import Modal from 'react-modal';
import {fileSize} from "@/app/util/db";
const customStyles = {
    content: {
        border: '0',
        borderRadius: '4px',
        bottom: 'auto',
        minHeight: '10rem',
        maxHeight: '15em',
        left: '50%',
        padding: '2rem',
        position: 'fixed',
        right: 'auto',
        top: '50%',
        transform: 'translate(-50%,-50%)',
        minWidth: '20rem',
        width: window.innerWidth < 800
            ? '60%'
            : '60%',
        maxWidth: '30rem',
        borderRadius: '20px'
    },
    overlay: {
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: 'rgba(0, 0, 0, 0.5)'
    }
};
function bytesToGB(bytes) {
    return (bytes / (1024 * 1024 * 1024)).toFixed(2);
  }
  function calculatePercentageUsed(bytesUsed, totalBytes) {
    var percentage = ((totalBytes - bytesUsed) / totalBytes) * 100;
    return percentage.toFixed(2); // Optional: Round to 5 decimal places
  }
  const userId = localStorage.getItem('my-drive-user')
export default function Storage(prop) {
    const [gb,setgb] = React.useState(0)
    const [gbper,setgbper] = React.useState(0)
     const storage = async e =>{
            await fileSize(userId).then(data=>{
               
                setgb(bytesToGB(data[0].SIZE))
                setgbper(calculatePercentageUsed(data[0].SIZE, 100 * 1024 * 1024 * 1024))
            })
            .catch(err => console.log(err))
     }
     React.useEffect(()=>{
        storage()
     },[prop.refresh === true])
    return (
        <Modal
            ariaHideApp={false}
            isOpen={prop.open}
            style={customStyles}
            contentLabel="Example Modal">
            <div className='modal-body '>

                <span className="material-icons closeModal" onClick={e => prop.close(false)}>
                    cancel
                </span>
                <div>Your Storage</div>
                <br/>
                <p>{gb} GB of 100 GB are used</p>
                <br/>
                <div class="w-full bg-gray-200 rounded-full dark:bg-gray-700">
                    <div
                        class="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
                        style={{"width" : gbper+"%"}}>
                        {gbper}% Left</div>
                </div>

            </div>

        </Modal>
    )
}
