<commit_before>import { Box, color, FilterIcon, Flex, Sans, Spacer, Theme } from "@artsy/palette"
import { CollectionQuery } from "__generated__/CollectionQuery.graphql"
import { defaultEnvironment } from "lib/relay/createEnvironment"
import renderWithLoadProgress from "lib/utils/renderWithLoadProgress"
import React, { Component, createRef } from "react"
import { Dimensions, FlatList, TouchableWithoutFeedback, View } from "react-native"
import { createFragmentContainer, graphql, QueryRenderer } from "react-relay"
import styled from "styled-components/native"
import { Collection_collection } from "../../../__generated__/Collection_collection.graphql"
import { FilterModalNavigator } from "../../../lib/Components/FilterModal"
import { CollectionArtworksFragmentContainer as CollectionArtworks } from "../../../lib/Scenes/Collection/Screens/CollectionArtworks"
import { CollectionHeaderContainer as CollectionHeader } from "../../../lib/Scenes/Collection/Screens/CollectionHeader"
import { Schema, screenTrack } from "../../../lib/utils/track"
import { ArtworkFilterContext, ArtworkFilterGlobalStateProvider } from "../../utils/ArtworkFiltersStore"
import { CollectionsHubRailsContainer as CollectionHubsRails } from "./Components/CollectionHubsRails/index"
import { CollectionFeaturedArtistsContainer as CollectionFeaturedArtists } from "./Components/FeaturedArtists"

interface CollectionProps {
  collection: Collection_collection
}

interface CollectionState {
  isArtworkGridVisible: boolean
  isFilterArtworksModalVisible: boolean
}

@screenTrack((props: CollectionProps) => ({
  context_screen: Schema.PageNames.Collection,
  context_screen_owner_slug: props.collection.slug,
  context_screen_owner_id: props.collection.id,
  context_screen_owner_type: Schema.OwnerEntityTypes.Collection,
}))
export class Collection extends Component<CollectionProps, CollectionState> {
  state = {
    isArtworkGridVisible: false,
    isFilterArtworksModalVisible: false,
  }
  viewabilityConfig = {
    viewAreaCoveragePercentThreshold: 25, // What percentage of the artworks component should be in the screen before toggling the filter button
  }
  private flatList = createRef<FlatList<any>>()

  onViewableItemsChanged = ({ viewableItems }: any /* STRICTNESS_MIGRATION */) => {
    ;(viewableItems || []).map((viewableItem: any) => {
      const artworksRenderItem = viewableItem?.item ?? ""
      const artworksRenderItemViewable = viewableItem?.isViewable || false

      if (artworksRenderItem === "collectionArtworks" && artworksRenderItemViewable) {
        return this.setState(_prevState => ({ isArtworkGridVisible: true }))
      }

      return this.setState(_prevState => ({ isArtworkGridVisible: false }))
    })
  }

  handleFilterArtworksModal() {
    this.setState(_prevState => {
      return { isFilterArtworksModalVisible: !_prevState.isFilterArtworksModalVisible }
    })
  }

  @screenTrack((props: CollectionProps) => ({
    action_name: "filter",
    context_screen_owner_type: Schema.OwnerEntityTypes.Collection,
    context_screen: Schema.PageNames.Collection,
    context_screen_owner_id: props.collection.id,
    context_screen_owner_slug: props.collection.slug,
    action_type: Schema.ActionTypes.Tap,
  }))
  openFilterArtworksModal() {
    this.handleFilterArtworksModal()
  }<commit_msg>wip ts error<commit_after>import { Box, color, FilterIcon, Flex, Sans, Spacer, Theme } from "@artsy/palette"
import { CollectionQuery } from "__generated__/CollectionQuery.graphql"
import { defaultEnvironment } from "lib/relay/createEnvironment"
import renderWithLoadProgress from "lib/utils/renderWithLoadProgress"
import React, { Component, createRef } from "react"
import { Dimensions, FlatList, TouchableWithoutFeedback, View } from "react-native"
import { createFragmentContainer, graphql, QueryRenderer } from "react-relay"
import styled from "styled-components/native"
import { Collection_collection } from "../../../__generated__/Collection_collection.graphql"
import { FilterModalNavigator } from "../../../lib/Components/FilterModal"
import { CollectionArtworksFragmentContainer as CollectionArtworks } from "../../../lib/Scenes/Collection/Screens/CollectionArtworks"
import { CollectionHeaderContainer as CollectionHeader } from "../../../lib/Scenes/Collection/Screens/CollectionHeader"
import { Schema, screenTrack } from "../../../lib/utils/track"
import { ArtworkFilterContext, ArtworkFilterGlobalStateProvider } from "../../utils/ArtworkFiltersStore"
import { CollectionsHubRailsContainer as CollectionHubsRails } from "./Components/CollectionHubsRails/index"
import { CollectionFeaturedArtistsContainer as CollectionFeaturedArtists } from "./Components/FeaturedArtists"
interface ViewableItems {
  viewableItems: {
    viewableItems: ViewToken[]
  }
}

interface ViewToken {
  item: any
  key: string
  index: number | null
  isViewable: boolean
  section: any
}

interface CollectionProps {
  collection: Collection_collection
}

interface CollectionState {
  isArtworkGridVisible: boolean
  isFilterArtworksModalVisible: boolean
}

@screenTrack((props: CollectionProps) => ({
  context_screen: Schema.PageNames.Collection,
  context_screen_owner_slug: props.collection.slug,
  context_screen_owner_id: props.collection.id,
  context_screen_owner_type: Schema.OwnerEntityTypes.Collection,
}))
export class Collection extends Component<CollectionProps, CollectionState> {
  state = {
    isArtworkGridVisible: false,
    isFilterArtworksModalVisible: false,
  }
  viewabilityConfig = {
    viewAreaCoveragePercentThreshold: 25, // What percentage of the artworks component should be in the screen before toggling the filter button
  }
  private flatList = createRef<FlatList<any>>()

  onViewableItemsChanged = ({ viewableItems }: ViewableItems) => {
    // @TODO: TS ERROR ?? Property 'map' does not exist on type '{ viewableItems: ViewToken[]; }'
    ;(viewableItems! ?? []).map((viewableItem: ViewToken) => {
      const artworksRenderItem = viewableItem?.item ?? ""
      const artworksRenderItemViewable = viewableItem?.isViewable || false

      console.log("Collection -> onViewableItemsChanged -> viewableItem", viewableItem)

      if (artworksRenderItem === "collectionArtworks" && artworksRenderItemViewable) {
        return this.setState(_prevState => ({ isArtworkGridVisible: true }))
      }

      return this.setState(_prevState => ({ isArtworkGridVisible: false }))
    })
  }

  handleFilterArtworksModal() {
    this.setState(_prevState => {
      return { isFilterArtworksModalVisible: !_prevState.isFilterArtworksModalVisible }
    })
  }

  @screenTrack((props: CollectionProps) => ({
    action_name: "filter",
    context_screen_owner_type: Schema.OwnerEntityTypes.Collection,
    context_screen: Schema.PageNames.Collection,
    context_screen_owner_id: props.collection.id,
    context_screen_owner_slug: props.collection.slug,
    action_type: Schema.ActionTypes.Tap,
  }))
  openFilterArtworksModal() {
    this.handleFilterArtworksModal()
  }
{'fraction_non_alphanumeric': 0.10717853574996432, 'fraction_numerical': 0.0005708577137148566, 'mean_word_length': 5.136602451838879, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 25, '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': '399382', 'n_tokens_mistral': 1915, 'n_tokens_neox': 1915, 'n_words': 409}