import React from 'react';
import BaseButton from '../BaseButton';
import BaseIcon from '../BaseIcon';
import * as icons from '@mdi/js';
import { useAppDispatch, useAppSelector } from '../../stores/hooks';

import { fetchWidgets, removeWidget } from '../../stores/roles/rolesSlice';
import { WidgetChartType, WidgetType } from './models/widget.model';
import { BarChart } from './components/BarChart';
import { PieChart } from './components/PieChart';
import { AreaChart } from './components/AreaChart';
import { LineChart } from './components/LineChart';

export const SmartWidget = ({ widget, userId, admin, roleId }) => {
  const dispatch = useAppDispatch();
  const corners = useAppSelector((state) => state.style.corners);
  const cardsStyle = useAppSelector((state) => state.style.cardsStyle);

  const deleteWidget = async () => {
    await dispatch(
      removeWidget({ id: userId, widgetId: widget.widget_id, roleId }),
    );
    await dispatch(fetchWidgets(roleId));
  };

  return (
    <div
      className={`${
        corners !== 'rounded-full' ? corners : 'rounded-3xl'
      }  dark:bg-dark-900   dark:border-dark-700 p-6  ${cardsStyle} ${
        widget.widget_type === 'chart'
          ? 'col-span-2'
          : 'lg:col-span-1 col-span-2'
      }`}
    >
      <div className='flex justify-between flex-col h-full'>
        <div className='flex justify-between items-center'>
          <div className='text-lg leading-tight  text-gray-500 dark:text-dark-600 line-clamp-2'>
            {widget.label}
          </div>

          {admin && (
            <BaseButton
              icon={icons.mdiClose}
              color='whiteDark'
              roundedFull
              onClick={deleteWidget}
            />
          )}
        </div>

        <div className='flex justify-center items-center h-full'>
          <div
            className={`${
              widget.widget_type === WidgetType.chart
                ? 'w-5/6 justify-center'
                : ''
            } items-center flex flex-grow justify-center`}
          >
            {widget.value ? (
              widget.widget_type === WidgetType.chart ? (
                widget.chart_type === WidgetChartType.bar ? (
                  <BarChart widget={widget} />
                ) : widget.chart_type === WidgetChartType.line ? (
                  <LineChart widget={widget} />
                ) : widget.chart_type === WidgetChartType.pie ? (
                  <PieChart widget={widget} />
                ) : widget.chart_type === WidgetChartType.area ? (
                  <AreaChart widget={widget} />
                ) : widget.chart_type === WidgetChartType.funnel ? (
                  <AreaChart widget={widget} />
                ) : null
              ) : (
                <div className='text-3xl leading-tight font-semibold truncate'>
                  {widget.value}
                </div>
              )
            ) : (
              <div className='text-center text-red-400'>
                Something went wrong, please try again or use a different query.
              </div>
            )}
          </div>

          {widget.type === WidgetType.scalar && widget.mdiIcon && (
            <div className='flex justify-end w-1/4'>
              <BaseIcon
                className='text-blue-500 flex-shrink-0'
                w='w-16'
                h='h-16'
                size={48}
                fill={widget.color}
                path={icons[widget.mdiIcon]}
              />
            </div>
          )}
        </div>
      </div>
    </div>
  );
};