<commit_before>import { EntityHeader, ReadMore } from "@artsy/palette"
import { unica } from "Assets/Fonts"
import { cloneDeep, take } from "lodash"
import React, { FC, useContext, useState } from "react"
import { createFragmentContainer, graphql } from "react-relay"
import styled from "styled-components"
import { slugify } from "underscore.string"
import { resize } from "Utils/resizer"
import { Responsive } from "Utils/Responsive"

import { AnalyticsSchema } from "Artsy/Analytics"

import {
  Box,
  Col,
  color,
  Flex,
  Grid,
  media,
  Row,
  Sans,
  Serif,
  Spacer,
} from "@artsy/palette"
import { Header_artworks } from "__generated__/Header_artworks.graphql"
import { SystemContext } from "Artsy"
import { FollowArtistButtonFragmentContainer as FollowArtistButton } from "Components/FollowButton/FollowArtistButton"
import { AuthModalIntent, openAuthModal } from "Utils/openAuthModal"

interface Props {
  collection: {
    artist_ids?: string[]
    category: string
    credit?: string
    description?: JSX.Element | string
    gene_ids?: string[]
    headerImage: string
    major_periods?: string[]
    medium?: string
    slug: string
    title: string
  }
  artworks: Header_artworks
}

const getReadMoreContent = description => {
  return (
    <>
      {description && (
        <span dangerouslySetInnerHTML={{ __html: description }} />
      )}
    </>
  )
}

const handleOpenAuth = (mediator, artist) => {
  openAuthModal(mediator, {
    entity: artist,
    contextModule: AnalyticsSchema.ContextModule.CollectionDescription,
    intent: AuthModalIntent.FollowArtist,
  })
}

const maxChars = {
  xs: 350,
  sm: 730,
  md: 670,
  lg: 660,
  xl: 820,
}

const imageWidthSizes = {
  xs: 320,
  sm: 688,
  md: 820,
  lg: 944,
  xl: 1112,
}

export const CollectionHeader: FC<Props> = ({ artworks, collection }) => {
  const { user, mediator } = useContext(SystemContext)
  const [showMore, setShowMore] = useState(false)

  const truncateForMobile = (featuredArtists, isColumnLayout) => {
    if (featuredArtists.length < 3) {
      return featuredArtists
    }

    const remainingArtists = featuredArtists.length - 3
    const viewMore = (
      <EntityContainer
        width={["100%", "25%"]}
        isColumnLayout={isColumnLayout}
        pb={20}
        key={4}
      >
        <ViewMore
          onClick={() => {
            setShowMore(true)
          }}
        >
          <EntityHeader initials={`+ ${remainingArtists}`} name="View more" />
        </ViewMore>
      </EntityContainer>
    )
    const artists = cloneDeep(featuredArtists)
    artists.splice(3, remainingArtists, viewMore)

    return showMore ? featuredArtists : artists
  }

  return (
    <Responsive>
      {({ xs, sm, md, lg }) => {
        const size = xs ? "xs" : sm ? "sm" : md ? "md" : lg ? "lg" : "xl"
        const imageWidth = imageWidthSizes[size]
        const imageHeight = xs ? 160 : 240
        const chars = maxChars[size]
        const categoryTarget = `/collections#${slugify(collection.category)}`
        const artistsCount = size === "xs" ? 9 : 12

        const hasMultipleArtists =
          artworks.merchandisable_artists &&
          artworks.merchandisable_artists.length > 1

        const isColumnLayout =
          hasMultipleArtists || !collection.description || size === "xs"
        const smallerScreen = size === "xs" || size === "sm"
        const featuredArtists = take(
          artworks.merchandisable_artists,
          artistsCount
        ).map((artist, index) => {
          const hasArtistMetaData = artist.nationality && artist.birthday
          return (
            <EntityContainer
              width={["100%", "25%"]}
              isColumnLayout={isColumnLayout}
              key={index}
              pb={20}
            >
              <EntityHeader
                imageUrl={artist.imageUrl}
                name={artist.name}
                meta={
                  hasArtistMetaData
                    ? `${artist.nationality}, b. ${artist.birthday}`
                    : null
                }
                href={`/artist/${artist.id}`}
                FollowButton={
                  <FollowArtistButton
                    artist={artist}
                    user={user}
                    trackingData={{
                      modelName: AnalyticsSchema.OwnerType.Artist,
                      context_module:
                        AnalyticsSchema.ContextModule.CollectionDescription,
                      entity_id: artist._id,
                      entity_slug: artist.id,
                    }}
                    onOpenAuthModal={() => handleOpenAuth(mediator, artist)}
                    render={({ is_followed }) => {
                      return (
                        <Sans
                          size="2"
                          weight="medium"
                          color="black"
                          style={{
                            cursor: "pointer",
                            textDecoration: "underline",
                          }}
                        >
                          {is_followed ? "Following" : "Follow"}
                        </Sans>
                      )
                    }}
                  />
                }
              />
            </EntityContainer>
          )
        })

        return (
          <header>
            <Flex flexDirection="column">
              <Box>
                <Background
                  p={2}
                  mt={[0, 3]}
                  mb={3}
                  headerImageUrl={resize(collection.headerImage, {
                    width: imageWidth * (xs ? 2 : 1),
                    height: imageHeight * (xs ? 2 : 1),
                    quality: 80,
                  })}
                  height={imageHeight}
                >
                  <Overlay />
                  {collection.credit && (<commit_msg>only use aggregate artists when there is not explicit artist_ids<commit_after>import { EntityHeader, ReadMore } from "@artsy/palette"
import { unica } from "Assets/Fonts"
import { cloneDeep, filter, take } from "lodash"
import React, { FC, useContext, useState } from "react"
import { createFragmentContainer, graphql } from "react-relay"
import styled from "styled-components"
import { slugify } from "underscore.string"
import { resize } from "Utils/resizer"
import { Responsive } from "Utils/Responsive"

import { AnalyticsSchema } from "Artsy/Analytics"

import {
  Box,
  Col,
  color,
  Flex,
  Grid,
  media,
  Row,
  Sans,
  Serif,
  Spacer,
} from "@artsy/palette"
import { Header_artworks } from "__generated__/Header_artworks.graphql"
import { SystemContext } from "Artsy"
import { FollowArtistButtonFragmentContainer as FollowArtistButton } from "Components/FollowButton/FollowArtistButton"
import { AuthModalIntent, openAuthModal } from "Utils/openAuthModal"

interface Props {
  collection: {
    artist_ids?: string[]
    category: string
    credit?: string
    description?: JSX.Element | string
    gene_ids?: string[]
    headerImage: string
    major_periods?: string[]
    medium?: string
    slug: string
    title: string
    query: any
  }
  artworks: Header_artworks
}

const getReadMoreContent = description => {
  return (
    <>
      {description && (
        <span dangerouslySetInnerHTML={{ __html: description }} />
      )}
    </>
  )
}

const handleOpenAuth = (mediator, artist) => {
  openAuthModal(mediator, {
    entity: artist,
    contextModule: AnalyticsSchema.ContextModule.CollectionDescription,
    intent: AuthModalIntent.FollowArtist,
  })
}

const maxChars = {
  xs: 350,
  sm: 730,
  md: 670,
  lg: 660,
  xl: 820,
}

const imageWidthSizes = {
  xs: 320,
  sm: 688,
  md: 820,
  lg: 944,
  xl: 1112,
}

export const CollectionHeader: FC<Props> = ({ artworks, collection }) => {
  const { user, mediator } = useContext(SystemContext)
  const [showMore, setShowMore] = useState(false)
  const hasMultipleArtists =
    artworks.merchandisable_artists &&
    artworks.merchandisable_artists.length > 1

  const truncateForMobile = (featuredArtists, isColumnLayout) => {
    if (featuredArtists.length < 3) {
      return featuredArtists
    }

    const remainingArtists = featuredArtists.length - 3
    const viewMore = (
      <EntityContainer
        width={["100%", "25%"]}
        isColumnLayout={isColumnLayout}
        pb={20}
        key={4}
      >
        <ViewMore
          onClick={() => {
            setShowMore(true)
          }}
        >
          <EntityHeader initials={`+ ${remainingArtists}`} name="View more" />
        </ViewMore>
      </EntityContainer>
    )
    const artists = cloneDeep(featuredArtists)
    artists.splice(3, remainingArtists, viewMore)

    return showMore ? featuredArtists : artists
  }

  const featuredArtistsEntityCollection = (artists, isColumnLayout) => {
    return artists.map((artist, index) => {
      const hasArtistMetaData = artist.nationality && artist.birthday
      return (
        <EntityContainer
          width={["100%", "25%"]}
          isColumnLayout={isColumnLayout}
          key={index}
          pb={20}
        >
          <EntityHeader
            imageUrl={artist.imageUrl}
            name={artist.name}
            meta={
              hasArtistMetaData
                ? `${artist.nationality}, b. ${artist.birthday}`
                : null
            }
            href={`/artist/${artist.id}`}
            FollowButton={
              <FollowArtistButton
                artist={artist}
                user={user}
                trackingData={{
                  modelName: AnalyticsSchema.OwnerType.Artist,
                  context_module:
                    AnalyticsSchema.ContextModule.CollectionDescription,
                  entity_id: artist._id,
                  entity_slug: artist.id,
                }}
                onOpenAuthModal={() => handleOpenAuth(mediator, artist)}
                render={({ is_followed }) => {
                  return (
                    <Sans
                      size="2"
                      weight="medium"
                      color="black"
                      style={{
                        cursor: "pointer",
                        textDecoration: "underline",
                      }}
                    >
                      {is_followed ? "Following" : "Follow"}
                    </Sans>
                  )
                }}
              />
            }
          />
        </EntityContainer>
      )
    })
  }

  const getFeaturedArtists = (
    artistsCount: number,
    isColumnLayout: boolean
  ) => {
    let featuredArtists

    if (collection.query.artist_ids.length > 0) {
      featuredArtists = filter(artworks.merchandisable_artists, artist =>
        collection.query.artist_ids.includes(artist._id)
      )

      return featuredArtistsEntityCollection(featuredArtists, isColumnLayout)
    }

    if (artworks.merchandisable_artists.length > 0) {
      return featuredArtistsEntityCollection(
        take(artworks.merchandisable_artists, artistsCount),
        isColumnLayout
      )
    }
  }

  return (
    <Responsive>
      {({ xs, sm, md, lg }) => {
        const size = xs ? "xs" : sm ? "sm" : md ? "md" : lg ? "lg" : "xl"
        const imageWidth = imageWidthSizes[size]
        const imageHeight = xs ? 160 : 240
        const chars = maxChars[size]
        const categoryTarget = `/collections#${slugify(collection.category)}`
        const artistsCount = size === "xs" ? 9 : 12
        const isColumnLayout =
          hasMultipleArtists || !collection.description || size === "xs"
        const smallerScreen = size === "xs" || size === "sm"
        const featuredArtists = getFeaturedArtists(artistsCount, isColumnLayout)

        return (
          <header>
            <Flex flexDirection="column">
              <Box>
                <Background
                  p={2}
                  mt={[0, 3]}
                  mb={3}
                  headerImageUrl={resize(collection.headerImage, {
                    width: imageWidth * (xs ? 2 : 1),
                    height: imageHeight * (xs ? 2 : 1),
                    quality: 80,
                  })}
                  height={imageHeight}
                >
                  <Overlay />
                  {collection.credit && (
{'fraction_non_alphanumeric': 0.10828128802011518, 'fraction_numerical': 0.011517560223862439, 'mean_word_length': 1.7845528455284554, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 70, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4936178', 'n_tokens_mistral': 3620, 'n_tokens_neox': 3394, 'n_words': 730}