import { DateUserInfo } from './DateUserInfo'
import { StartEndView, TextView } from '../Map'
import { HeaderView } from '../Map/Subcomponents/ItemPopupComponents/HeaderView'
import { Item } from '../../types'
import { useNavigate } from 'react-router-dom'
import { getValue } from '../../Utils/GetValue'
import useWindowDimensions from '../Map/hooks/useWindowDimension'

export const ItemCard = ({i,loading, url, parameterField, deleteCallback}:{i:Item, loading: boolean, url:string, parameterField: string, deleteCallback: any}) => {
    const navigate = useNavigate();
    const windowDimensions = useWindowDimensions();

  return (
    <div className='tw-cursor-pointer tw-card tw-border-[1px] tw-border-base-300 tw-card-body tw-shadow-xl tw-bg-base-100 tw-text-base-content tw-p-4 tw-mb-4 tw-h-fit' onClick={() => {
      let params = new URLSearchParams(window.location.search);
      windowDimensions.width >= 786 && navigate(url + getValue(i, parameterField) + `${params ? `?${params}` : ""}`)
      windowDimensions.width < 786 && navigate("/" + getValue(i, parameterField) + `${params ? `?${params}` : ""}`)

      }}>
    <HeaderView loading={loading} item={i} api={i.layer?.api} itemAvatarField={i.layer?.itemAvatarField} itemNameField={i.layer?.itemNameField} itemSubnameField={i.layer?.itemSubnameField} editCallback={() => navigate("/edit-item/" + i.id)} deleteCallback={() => deleteCallback(i)}></HeaderView>
    <div className='tw-overflow-y-auto tw-overflow-x-hidden tw-max-h-64 fade'>
        {i.layer?.itemType.show_start_end &&
            <StartEndView item={i}></StartEndView>
        }
        {i.layer?.itemType.show_text &&
            <TextView truncate item={i} itemTextField={i.layer?.itemTextField} />
        }
    </div>
    <DateUserInfo item={i}></DateUserInfo>
</div>
  )
}