import React from 'react'
import { CloseOutlined, Grading, PersonOutlined, ShoppingCartOutlined, Warehouse } from '@mui/icons-material';
import "../widget/widget.scss"
import { useState } from 'react';
import { AnimateSharedLayout } from 'framer-motion';
const Widget =({type}) => {
let data;
//temporary
const [expanded, setExpanded]= useState(false);
//const diff =20;
switch(type){
case "BestSeller":
data={
amount:10,
title:"Best Seller",
isMoney:false,
link:"View Best Seller items",
icon:<PersonOutlined className="icon" style={{color:"white", backgroundColor:"green",}}/>,
};
break;
case "lowstock":
data={
amount:20,
title:"Low Stock",
isMoney:false,
link:"View Low stock item ",
icon:<ShoppingCartOutlined className="icon" style={{color:"white", backgroundColor:"maroon",}}/>,
};
break;
case "instock":
data={
amount:30,
title:"In Stock",
isMoney:true,
link:"View purchased order",
icon:<Warehouse className="icon" style={{color:"white", backgroundColor:"green",}}/>,
};
break;
case "out":
data={
amount:40,
title:"Out",
isMoney:true,
link:"View sales order",
icon:<Grading className="icon" style={{color:"white", backgroundColor:"grey",}}/>,
};
break;
default:
break;
}
return (
expanded
? <ExpandedCard param={data} setExpanded={()=>setExpanded(false)}/>
: <CompactCard param={data} setExpanded={()=>setExpanded(true)}/>
);
};
//compactCard
function CompactCard ({param, setExpanded}){
return(
<div className="widget" onClick={setExpanded} layoutId={`card-${param.title}`}>
<div className="left">
<span className="title">{param.title}</span>
<span className="counter">{param.isMoney && "$"}{param.amount}</span>
<span className="link">{param.link}</span>
</div>
<div className="right">
{/*<div className="percentage positive">
<KeyboardArrowUp/>
{diff}%
</div>*/}
{param.icon}
</div>
</div>
)
}
//expandedCard
function ExpandedCard ({param,setExpanded}){
return(
<div className="ExpandedCard" layoutId={`card-${param.title}`}>
<div>
<CloseOutlined onClick={setExpanded}/>
</div>
<span>{param.title}</span>
</div>
)
}
export default Widget