Compass/web/components/profile/profile-info.tsx

import {JSONContent} from '@tiptap/core'
import {debug} from 'common/logger'
import {Profile} from 'common/profiles/profile'
import {UserActivity} from 'common/user'
import {ProfileAnswers} from 'web/components/answers/profile-answers'
import {ProfileBio} from 'web/components/bio/profile-bio'
import {Col} from 'web/components/layout/col'
import {Row} from 'web/components/layout/row'
import {SignUpButton} from 'web/components/nav/sidebar'
import {ViewProfileCardButton} from 'web/components/photos-modal'
import {ConnectActions} from 'web/components/profile/connect-actions'
import ProfileHeader from 'web/components/profile/profile-header'
import ProfileAbout from 'web/components/profile-about'
import ProfileCarousel from 'web/components/profile-carousel'
import {ProfileCommentSection} from 'web/components/profile-comment-section'
import {Content} from 'web/components/widgets/editor'
import {useGetter} from 'web/hooks/use-getter'
import {useHiddenProfiles} from 'web/hooks/use-hidden-profiles'
import {useUser} from 'web/hooks/use-user'
import {useUserActivity} from 'web/hooks/use-user-activity'
import {User} from 'web/lib/firebase/users'
import {useT} from 'web/lib/locale'
import {getStars} from 'web/lib/supabase/stars'

export function ProfileInfo(props: {
  profile: Profile
  user: User
  refreshProfile: () => void
  fromProfilePage?: Profile
  fromSignup?: boolean
}) {
  const {profile, user, refreshProfile, fromProfilePage, fromSignup} = props
  debug('Rendering Profile for', user.username, user.name, props)

  const currentUser = useUser()
  const t = useT()
  // const currentProfile = useProfile()
  // const isCurrentUser = currentUser?.id === user.id

  const {data: starredUsers, refresh: refreshStars} = useGetter('stars', currentUser?.id, getStars)
  const starredUserIds = starredUsers?.map((u) => u.id)

  const {hiddenProfiles} = useHiddenProfiles()
  const isHiddenFromMe = hiddenProfiles?.some((v) => v.id === user.id)

  // const { data, refresh } = useAPIGetter('get-likes-and-ships', {
  //   userId: user.id,
  // })
  // const { likesGiven, likesReceived, ships } = data ?? {}
  //
  // const liked =
  //   !!currentUser &&
  //   !!likesReceived &&
  //   likesReceived.map((l) => l.user_id).includes(currentUser.id)
  // const likedBack =
  //   !!currentUser &&
  //   !!likesGiven &&
  //   likesGiven.map((l) => l.user_id).includes(currentUser.id)

  // const shipped =
  //   !!ships && hasShipped(currentUser, fromProfilePage?.user_id, user.id, ships)

  // const areCompatible =
  //   !!currentProfile && areGenderCompatible(currentProfile, profile)

  // Allow everyone to message everyone for now
  const showMessageButton = true // liked || likedBack || !areCompatible

  const isProfileVisible = currentUser || profile.visibility === 'public'

  const {data: userActivity} = useUserActivity(user?.id)

  return (
    <>
      <ProfileHeader
        user={user}
        userActivity={userActivity}
        profile={profile}
        simpleView={!!fromProfilePage}
        starredUserIds={starredUserIds ?? []}
        refreshStars={refreshStars}
        showMessageButton={showMessageButton}
        refreshProfile={refreshProfile}
        isHiddenFromMe={isHiddenFromMe}
      />
      {isProfileVisible ? (
        <ProfileContent
          user={user}
          userActivity={userActivity}
          profile={profile}
          refreshProfile={refreshProfile}
          fromProfilePage={fromProfilePage}
          fromSignup={fromSignup}
          isProfileVisible={isProfileVisible}
          // likesGiven={likesGiven ?? []}
          // likesReceived={likesReceived ?? []}
          // ships={ships ?? []}
          // refreshShips={refresh}
        />
      ) : (
        <Col className="bg-canvas-0 w-full gap-4 rounded p-4">
          <div className="text-sm text-gray-500 dark:text-gray-400">
            <Content className="w-full line-clamp-6" content={profile.bio as JSONContent} />
          </div>
          <Col className="relative gap-4">
            <div className="bg-ink-200 dark:bg-ink-400 h-4 w-2/5" />
            <div className="bg-ink-200 dark:bg-ink-400 h-4 w-3/5" />
            <div className="bg-ink-200 dark:bg-ink-400 h-4 w-1/2" />
            <div className="from-canvas-0 absolute bottom-0 h-12 w-full bg-gradient-to-t to-transparent" />
          </Col>
          <Row className="gap-2">
            <SignUpButton text={t('profile.info.signup_to_see', 'Sign up to see profile')} />
          </Row>
        </Col>
      )}
      {/*{areCompatible &&*/}
      {/*  ((!fromProfilePage && !isCurrentUser) ||*/}
      {/*    (fromProfilePage && fromProfilePage.user_id === currentUser?.id)) && (*/}
      {/*    <Row className="right-0 mr-1 self-end lg:bottom-6">*/}
      {/*      <LikeButton targetProfile={profile} liked={liked} refresh={refresh} />*/}
      {/*    </Row>*/}
      {/*  )}*/}
      {/*{fromProfilePage &&*/}
      {/*  fromProfilePage.user_id !== currentUser?.id &&*/}
      {/*  user.id !== currentUser?.id && (*/}
      {/*    <Row className="sticky bottom-[70px] right-0 mr-1 self-end lg:bottom-6">*/}
      {/*      <ShipButton*/}
      {/*        shipped={shipped}*/}
      {/*        targetId1={fromProfilePage.user_id}*/}
      {/*        targetId2={user.id}*/}
      {/*        refresh={refresh}*/}
      {/*      />*/}
      {/*    </Row>*/}
      {/*  )}*/}
    </>
  )
}

function ProfileContent(props: {
  user: User
  userActivity?: UserActivity
  profile: Profile
  refreshProfile: () => void
  fromProfilePage?: Profile
  fromSignup?: boolean
  isProfileVisible?: true | User
  // likesGiven: LikeData[]
  // likesReceived: LikeData[]
  // ships: ShipData[]
  // refreshShips: () => Promise<void>
}) {
  const {
    user,
    userActivity,
    profile,
    refreshProfile,
    fromProfilePage,
    fromSignup,
    isProfileVisible,
    // likesGiven,
    // likesReceived,
    // ships,
    // refreshShips,
  } = props

  const currentUser = useUser()
  const isCurrentUser = currentUser?.id === user.id

  return (
    <>
      <div className={'w-fit mx-4 mb-2'}>
        <ViewProfileCardButton user={user} profile={profile} />
      </div>
      <ProfileAbout profile={profile} userActivity={userActivity} isCurrentUser={isCurrentUser} />
      <ProfileBio
        isCurrentUser={isCurrentUser}
        profile={profile}
        refreshProfile={refreshProfile}
        fromProfilePage={fromProfilePage}
      />
      {isProfileVisible && <ProfileCarousel profile={profile} refreshProfile={refreshProfile} />}
      <ProfileAnswers
        isCurrentUser={isCurrentUser}
        user={user}
        fromSignup={fromSignup}
        fromProfilePage={fromProfilePage}
        profile={profile}
      />
      <ConnectActions user={user} profile={profile} />
      <ProfileCommentSection
        onUser={user}
        profile={profile}
        currentUser={currentUser}
        simpleView={!!fromProfilePage}
      />
      {/*<LikesDisplay*/}
      {/*  likesGiven={likesGiven}*/}
      {/*  likesReceived={likesReceived}*/}
      {/*  ships={ships}*/}
      {/*  refreshShips={refreshShips}*/}
      {/*  profileProfile={profile}*/}
      {/*/>*/}
    </>
  )
}