import State from "@infinity-beyond/modules/state.ts";
import SinglePanelLayout from "@infinity-beyond/ui/components/ui/layout/SinglePanelLayout.tsx";
import type { PageProps } from "$fresh/server.ts";
// import DateRangeDropdown from "@islands/charts/date_range_dropdown.tsx";

export default function Dashboard({ state }: PageProps<any, Infinity.Context>) {
  const entities = State.Entities.values().toArray();

  return (
    <SinglePanelLayout>
      <div class="px-4 py-8 mx-auto bg-[#fe1148]">
        <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
          <img
            class="mb-6"
            src="/logo.svg"
            width="128"
            height="128"
            alt="the Infinity logo: an infinity symbol"
          />
          <h1 class="text-4xl font-bold text-black">{ State.Application!.app_name }</h1>
        </div>
      </div>

      <div class="p-8">
        {/* <DateRangeDropdown /> */}
        { state.user ?
          <p class="text-xs opacity-60">Date Range Dropdown here</p>
          :
          <div>
            <a href='/login'>Sign in</a> to get started
          </div>
        }
      </div>

      <div class="flex flex-col items-center">
        {
          entities.map(entity => {
            if(!state.user?.has_permission(`VIEW_${entity.name.toUpperCase()}`)) return;
            const chart_contents = entity.charts();
            const stat_contents = entity.stats();

            if(chart_contents || stat_contents) {
              return <div class="w-256 max-w-full mx-auto overflow-x-auto" key={entity.slug}>
                <div class="text-2xl pt-12 pb-8 flex items-center justify-center gap-2">
                  { entity.options.ui_icon && <entity.options.ui_icon /> }
                  { entity.name }
                </div>
                { stat_contents && <>
                  <div class="flex overflow-x-auto flex-wrap">
                    { stat_contents }
                  </div>
                </>}
                { chart_contents && <>
                  <div class="flex overflow-x-auto flex-wrap">
                    { chart_contents }
                  </div>
                </>}
              </div>
            }
          })
        }
      </div>
    </SinglePanelLayout>
  );
}