import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import Loader from "../Loader";
import DropDownButton from "../DropDownButton";
import DropdownChildButton from "../DropdownChildButton";
import CreditBarChart from "../CreditBarChart";
import styles from "./styles.module.scss";
export var TimeFrame;
(function (TimeFrame) {
    TimeFrame["Last7Days"] = "Last7Days";
    TimeFrame["LastMonth"] = "LastMonth";
    TimeFrame["Last3Months"] = "Last3Months";
    TimeFrame["Last6Months"] = "Last6Months";
    TimeFrame["LastYear"] = "LastYear";
    TimeFrame["Today"] = "Today";
    TimeFrame["Custom"] = "Custom";
})(TimeFrame || (TimeFrame = {}));
export const typeFrameText = {
    [TimeFrame.Last7Days]: "Past 7 Days",
    [TimeFrame.LastMonth]: "Past Month",
    [TimeFrame.Last3Months]: "Past 3 Months",
    [TimeFrame.Last6Months]: "Past 6 Months",
    [TimeFrame.LastYear]: "Past Year",
    [TimeFrame.Today]: "Today",
    [TimeFrame.Custom]: "Custom",
};
const CreditUsageChart = ({ title, selectedTimeFrame, creditUsageData, isLoading, isError, lagendData, setSelectedTimeFrame, }) => {
    const renderLoader = () => (_jsx("div", { className: styles.creditUsageChartLoader, children: _jsx(Loader, { width: "24", height: "24" }) }));
    const renderError = () => (_jsx("div", { className: styles.creditUsageChartError, children: _jsx("span", { className: styles.creditUsageChartDataNA, children: "No data to show yet" }) }));
    const renderEmailOption = () => (_jsxs(_Fragment, { children: [lagendData?.personalEmail && (_jsxs("div", { className: styles.option, children: [_jsx("div", { className: styles.personalEmailColor }), _jsx("span", { children: lagendData.personalEmail })] })), lagendData?.personalPhone && (_jsxs("div", { className: styles.option, children: [_jsx("div", { className: styles.personalPhoneColor }), _jsx("span", { children: lagendData.personalPhone })] })), lagendData?.workPhone && (_jsxs("div", { className: styles.option, children: [_jsx("div", { className: styles.workPhoneColor }), _jsx("span", { children: lagendData.workPhone })] })), lagendData?.workEmail && (_jsxs("div", { className: styles.option, children: [_jsx("div", { className: styles.workEmailColor }), _jsx("span", { children: lagendData.workEmail })] }))] }));
    return (_jsxs("div", { className: styles.creditUsageChartContainer, children: [_jsxs("div", { className: styles.creditUsageChartHeader, children: [_jsx("h3", { children: title }), _jsxs("div", { className: styles.options, children: [renderEmailOption(), _jsx("div", { className: styles.dropDownContainer, children: _jsx(DropDownButton, { dropDownText: typeFrameText[selectedTimeFrame], children: Object.values(TimeFrame)
                                        .filter((type) => ![TimeFrame.Today, TimeFrame.Custom].includes(type))
                                        .map((type, index) => (_jsx(DropdownChildButton, { onClick: () => setSelectedTimeFrame(type), text: typeFrameText[type], active: selectedTimeFrame === type }, index))) }) })] })] }), isLoading ? (renderLoader()) : isError ? (renderError()) : (_jsx("div", { className: styles.creditUsageChart, children: _jsx(CreditBarChart, { revenues: creditUsageData }) }))] }));
};
export default CreditUsageChart;
