utopia-ui/src/Components/Profile/Subcomponents/LinkedItemsHeaderView.tsx

/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/no-empty-function */
/* eslint-disable @typescript-eslint/no-unsafe-return */
/* eslint-disable @typescript-eslint/no-unsafe-call */
/* eslint-disable @typescript-eslint/restrict-plus-operands */
/* eslint-disable @typescript-eslint/no-unnecessary-condition */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
import { useEffect } from 'react'

import { useAppState } from '#components/AppShell/hooks/useAppState'
import { getValue } from '#utils/GetValue'

import type { Item } from '#types/Item'

export function LinkedItemsHeaderView({
  item,
  unlinkCallback,
  itemNameField,
  itemAvatarField,
  loading,
  unlinkPermission,
  itemSubnameField,
}: {
  item: Item
  unlinkCallback?: any
  itemNameField?: string
  itemAvatarField?: string
  itemSubnameField?: string
  loading?: boolean
  unlinkPermission: boolean
}) {
  const appState = useAppState()

  const avatar =
    itemAvatarField && getValue(item, itemAvatarField)
      ? appState.assetsApi.url + getValue(item, itemAvatarField)
      : item.layer?.itemAvatarField &&
        item &&
        getValue(item, item.layer?.itemAvatarField) &&
        appState.assetsApi.url + getValue(item, item.layer?.itemAvatarField)
  const title = itemNameField
    ? getValue(item, itemNameField)
    : item.layer?.itemNameField && item && getValue(item, item.layer.itemNameField)
  const subtitle = itemSubnameField
    ? getValue(item, itemSubnameField)
    : item.layer?.itemSubnameField && item && getValue(item, item.layer.itemSubnameField)

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

  return (
    <>
      <div className='tw-flex tw-flex-row'>
        <div className={'tw-grow tw-max-w-[calc(100%-60px)] }'}>
          <div className='flex items-center'>
            {avatar && (
              <img
                className={'tw-w-10 tw-inline tw-rounded-full'}
                src={avatar}
                alt={item.name + ' logo'}
              />
            )}
            <div className={`${avatar ? 'tw-ml-2' : ''} tw-overflow-hidden`}>
              <div className={'tw-text-xl tw-font-semibold tw-truncate'}>{title}</div>
              {subtitle && (
                <div className='tw-text-xs tw-truncate  tw-text-gray-500 '>{subtitle}</div>
              )}
            </div>
          </div>
        </div>
        <div className='tw-col-span-1' onClick={(e) => e.stopPropagation()}>
          {unlinkPermission && (
            <div className='tw-dropdown tw-dropdown-bottom'>
              <label
                tabIndex={0}
                className=' tw-btn tw-m-1 tw-leading-3 tw-border-none tw-min-h-0 tw-h-6'
              >
                <svg
                  xmlns='http://www.w3.org/2000/svg'
                  className='tw-h-5 tw-w-5'
                  viewBox='0 0 20 20'
                  fill='currentColor'
                >
                  <path d='M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z' />
                </svg>
              </label>
              <ul
                tabIndex={0}
                className='tw-dropdown-content tw-menu tw-p-2 tw-shadow tw-bg-base-100 tw-rounded-box tw-z-1000'
              >
                {true && (
                  <li>
                    <a
                      className='tw-cursor-pointer !tw-text-error'
                      onClick={() => unlinkCallback(item.id)}
                    >
                      {loading ? (
                        <span className='tw-loading tw-loading-spinner tw-loading-sm'></span>
                      ) : (
                        <svg
                          className='tw-h-5 tw-w-5'
                          stroke='currentColor'
                          fill='currentColor'
                          strokeWidth='0'
                          viewBox='0 0 512 512'
                          xmlns='http://www.w3.org/2000/svg'
                        >
                          <path d='M304.083 405.907c4.686 4.686 4.686 12.284 0 16.971l-44.674 44.674c-59.263 59.262-155.693 59.266-214.961 0-59.264-59.265-59.264-155.696 0-214.96l44.675-44.675c4.686-4.686 12.284-4.686 16.971 0l39.598 39.598c4.686 4.686 4.686 12.284 0 16.971l-44.675 44.674c-28.072 28.073-28.072 73.75 0 101.823 28.072 28.072 73.75 28.073 101.824 0l44.674-44.674c4.686-4.686 12.284-4.686 16.971 0l39.597 39.598zm-56.568-260.216c4.686 4.686 12.284 4.686 16.971 0l44.674-44.674c28.072-28.075 73.75-28.073 101.824 0 28.072 28.073 28.072 73.75 0 101.823l-44.675 44.674c-4.686 4.686-4.686 12.284 0 16.971l39.598 39.598c4.686 4.686 12.284 4.686 16.971 0l44.675-44.675c59.265-59.265 59.265-155.695 0-214.96-59.266-59.264-155.695-59.264-214.961 0l-44.674 44.674c-4.686 4.686-4.686 12.284 0 16.971l39.597 39.598zm234.828 359.28l22.627-22.627c9.373-9.373 9.373-24.569 0-33.941L63.598 7.029c-9.373-9.373-24.569-9.373-33.941 0L7.029 29.657c-9.373 9.373-9.373 24.569 0 33.941l441.373 441.373c9.373 9.372 24.569 9.372 33.941 0z'></path>
                        </svg>
                      )}
                    </a>
                  </li>
                )}
              </ul>
            </div>
          )}
        </div>
      </div>
    </>
  )
}