<commit_before>import { EntityHeader, ReadMore, space } from "@artsy/palette"
import { AnalyticsSchema } from "Artsy/Analytics"
import { unica } from "Assets/Fonts"
import { cloneDeep, filter, take } from "lodash"
import React, { FC, useState } from "react"
import { createFragmentContainer, graphql } from "react-relay"
import { data as sd } from "sharify"
import styled from "styled-components"
import { slugify } from "underscore.string"
import { resize } from "Utils/resizer"
import { Responsive } from "Utils/Responsive"

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

// TODO: Update query interface when we know the schema
export interface Props {
  collection: {
    artist_ids?: string[]
    category: string
    credit?: string
    description?: string
    gene_ids?: string[]
    headerImage: string
    major_periods?: string[]
    medium?: string
    slug: string
    title: string
    query: any
  }
  artworks: Header_artworks
}

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

export const getWidth = () => {
  let width: number
  try {
    width = window.innerWidth
  } catch (e) {
    width = 0
  }
  return width
}

export const getFeaturedArtists = (
  artistsCount: number,
  collection,
  isColumnLayout: boolean,
  merchandisableArtists,
  mediator,
  user
) => {
  let featuredArtists

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

    return featuredArtistsEntityCollection(
      featuredArtists,
      isColumnLayout,
      mediator,
      user
    )
  }

  if (merchandisableArtists.length > 0) {
    return featuredArtistsEntityCollection(
      take(merchandisableArtists, artistsCount),
      isColumnLayout,
      mediator,
      user
    )
  }
}

export const featuredArtistsEntityCollection = (
  artists,
  isColumnLayout,
  mediator,
  user
) => {
  return artists.map((artist, index) => {
    const hasArtistMetaData = artist.nationality && artist.birthday
    return (
      <EntityContainer
        width={["100%", "33%", "33%", "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 maxChars = {
  xs: 350,
  sm: 730,
  md: 670,
  lg: 660,
  xl: 820,
}

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

const imageHeightSizes = {
  xs: 160,
  sm: 250,
}

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

  function calculateNumberOfArtists(size) {
    if (sd.IS_MOBILE) {
      return 3
    }
    if (size === "md") {
      return 5
    }
    if (size === "lg") {
      return 7
    }
    if (size === "xl") {
      return 7
    }
    return 3
  }

  // TODO: Add test here to test this method works as expected<commit_msg>Small refactor to identify number of featured artists to show in collection header<commit_after>import { EntityHeader, ReadMore, space } from "@artsy/palette"
import { AnalyticsSchema } from "Artsy/Analytics"
import { unica } from "Assets/Fonts"
import { cloneDeep, filter, take } from "lodash"
import React, { FC, useState } from "react"
import { createFragmentContainer, graphql } from "react-relay"
import { data as sd } from "sharify"
import styled from "styled-components"
import { slugify } from "underscore.string"
import { resize } from "Utils/resizer"
import { Responsive } from "Utils/Responsive"

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

// TODO: Update query interface when we know the schema
export interface Props {
  collection: {
    artist_ids?: string[]
    category: string
    credit?: string
    description?: string
    gene_ids?: string[]
    headerImage: string
    major_periods?: string[]
    medium?: string
    slug: string
    title: string
    query: any
  }
  artworks: Header_artworks
}

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

export const getWidth = () => {
  let width: number
  try {
    width = window.innerWidth
  } catch (e) {
    width = 0
  }
  return width
}

export const getFeaturedArtists = (
  artistsCount: number,
  collection,
  isColumnLayout: boolean,
  merchandisableArtists,
  mediator,
  user
) => {
  let featuredArtists

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

    return featuredArtistsEntityCollection(
      featuredArtists,
      isColumnLayout,
      mediator,
      user
    )
  }

  if (merchandisableArtists.length > 0) {
    return featuredArtistsEntityCollection(
      take(merchandisableArtists, artistsCount),
      isColumnLayout,
      mediator,
      user
    )
  }
}

export const featuredArtistsEntityCollection = (
  artists,
  isColumnLayout,
  mediator,
  user
) => {
  return artists.map((artist, index) => {
    const hasArtistMetaData = artist.nationality && artist.birthday
    return (
      <EntityContainer
        width={["100%", "33%", "33%", "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 maxChars = {
  xs: 350,
  sm: 730,
  md: 670,
  lg: 660,
  xl: 820,
}

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

const imageHeightSizes = {
  xs: 160,
  sm: 250,
}

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

  function calculateNumberOfArtists(size) {
    if (sd.IS_MOBILE) {
      return 3
    }
    switch (size) {
      case "md":
        return 5
      case "lg":
      case "xl":
        return 7
      default:
        return 3
    }
  }

  // TODO: Add test here to test this method works as expected
{'fraction_non_alphanumeric': 0.10427560750538296, 'fraction_numerical': 0.011791243719881063, 'mean_word_length': 2.236230922362309, 'pattern_counts': {'":': 3, '<': 17, '<?xml version=': 0, '>': 41, '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': '932763', 'n_tokens_mistral': 3066, 'n_tokens_neox': 2920, 'n_words': 675}