/* eslint-disable @typescript-eslint/no-unnecessary-condition */
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable import-x/no-relative-parent-imports */
/* eslint-disable new-cap */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
import { useEffect, useState } from 'react'
import {
  UtopiaMap,
  Layer,
  PopupView,
  PopupButton,
  StartEndView,
  TextView,
  PopupForm,
  PopupStartEndInput,
  PopupTextAreaInput,
  PopupTextInput,
  HeaderView,
} from 'utopia-ui'

import { itemsApi } from '../api/itemsApi'

import type { Place } from '../api/directus'
import type { LayerProps } from 'utopia-ui'

interface layerApi {
  id: string
  api: itemsApi<Place>
}

function MapContainer({ layers, map }: { layers: LayerProps[]; map: any }) {
  const [apis, setApis] = useState<layerApi[]>([])

  useEffect(() => {
    // get timestamp for the start of the current day
    const now = new Date()
    const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate())
    const startOfDayISO = startOfDay.toISOString()

    const newApis = layers.map((layer: LayerProps) => {
      // Only apply date filter if showPastItems is not explicitly set to true
      const dateFilter = layer.showPastItems
        ? undefined
        : {
            _or: [
              {
                end: {
                  _gt: startOfDayISO,
                },
              },
              {
                end: {
                  _null: true,
                },
              },
            ],
          }

      return {
        id: layer.id,
        api: new itemsApi<Place>('items', layer.id, undefined, dateFilter),
      }
    })

    setApis(newApis)
  }, [layers])

  useEffect(() => {}, [apis])

  return (
    <>
      <UtopiaMap
        geo={map.geo}
        zoom={map.zoom || 5}
        center={map.center ? [map.center?.coordinates[1], map.center?.coordinates[0]] : [50.6, 9.5]}
        height='100%'
        width='100%'
        showFilterControl={map.show_filter_control}
        showLayerControl={map.show_layer_control}
        showGratitudeControl={map.show_gratitude_control}
        donationWidget={map.donation_widget}
        showThemeControl={map.show_theme_control}
        defaultTheme={map.default_theme}
        showZoomControl={map.show_zoom_control}
        expandLayerControl={map.expand_layer_control}
        tileServerUrl={map.tile_server_url}
        tileServerAttribution={map.tile_server_attribution}
        tilesType={map.tiles_type}
        maplibreStyle={map.maplibre_style}
        showFullscreenControl={map.show_fullscreen_control}
        zoomOffset={map.zoom_offset}
        tileSize={map.tile_size}
      >
        {layers &&
          apis &&
          layers.map((layer) => (
            <Layer
              id={layer.id}
              key={layer.id}
              name={layer.name}
              menuText={layer.menuText}
              menuColor={layer.menuColor}
              markerIcon={layer.markerIcon}
              markerShape={layer.markerShape}
              userProfileLayer={layer.userProfileLayer}
              markerDefaultColor={layer.menuColor}
              markerDefaultColor2={
                layer.markerDefaultColor2 ? layer.markerDefaultColor2 : 'RGBA(35, 31, 32, 0.2)'
              }
              itemType={layer.itemType}
              customEditLink={layer.itemType.small_form_edit ? undefined : '/edit-item'}
              customEditParameter='id'
              public_edit_items={layer.public_edit_items}
              listed={layer.listed}
              api={apis.find((api) => api.id === layer.id)?.api}
              item_default_name={layer.item_default_name}
            >
              <PopupView>
                {layer.itemType.show_start_end && <StartEndView></StartEndView>}
                {layer.itemType.show_profile_button && (
                  <PopupButton
                    url={layer.itemType.custom_profile_url ?? '/item'}
                    parameterField={
                      layer.itemType.custom_profile_url ? 'extended.external_profile_id' : 'id'
                    }
                    text={layer.itemType.button_label ?? 'Profile'}
                    target={layer.itemType.custom_profile_url ? '_blank' : '_self'}
                  />
                )}
                {layer.itemType.show_text && <TextView truncate></TextView>}
              </PopupView>
              <PopupForm>
                {layer.itemType.show_header_view_in_form && <HeaderView hideMenu />}
                {layer.itemType.show_name_input && (
                  <PopupTextInput dataField='name' placeholder='Name'></PopupTextInput>
                )}
                {layer.itemType.show_start_end_input && (
                  <PopupStartEndInput showLabels={false}></PopupStartEndInput>
                )}
                {layer.itemType.show_text_input && (
                  <div className='tw:mt-4'>
                    <PopupTextAreaInput
                      dataField='text'
                      placeholder={layer.itemType.text_input_label ?? 'Text ...'}
                      style='tw:h-40'
                    ></PopupTextAreaInput>
                  </div>
                )}
                {
                  // layer.public_edit_items && <PopupCheckboxInput dataField={'public_edit'} label={'public edit'}/>
                }
                {layer.itemType.custom_text && (
                  <div className='tw:flex tw:justify-center'>
                    <p>{layer.itemType.custom_text}</p>
                  </div>
                )}
                {layer.item_presets &&
                  Object.entries(layer.item_presets).map((ip: any) => (
                    <input key={ip[0]} type='hidden' id={ip[0]} name={ip[0]} value={ip[1]} />
                  ))}
              </PopupForm>
            </Layer>
          ))}
      </UtopiaMap>
    </>
  )
}

export default MapContainer