<commit_before>import { useEffect, useState } from "react"
import * as React from "react"
import {
  Button,
  Flex,
  LabeledInput,
  Message,
  Radio,
  RadioGroup,
  Spacer,
  useThemeConfig,
} from "@artsy/palette"
import { useArtworkFilterContext } from "../ArtworkFilterContext"
import styled from "styled-components"
import { Media } from "v2/Utils/Responsive"
import { themeGet } from "@styled-system/theme-get"
import { FilterExpandable } from "./FilterExpandable"
import { isCustomValue } from "./Utils/isCustomValue"

// Disables arrows in numeric inputs
export const NumericInput = styled(LabeledInput).attrs({ type: "number" })`
  /* Chrome, Safari, Edge, Opera */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  input[type="number"] {
    -moz-appearance: textfield;
  }

  /* HACK: Setting the font-size to a minimum 16px prevents iOS from zooming on focus */
  /* This won't be necessary when upgraded to Palette v3 */
  @media ${themeGet("mediaQueries.xs")} {
    input {
      font-size: 16px;
    }
  }
`

const PRICE_RANGES = [
  { name: "$50K+", value: "50000-*" },
  { name: "$25K – $50K", value: "25000-50000" },
  { name: "$10K – $25K", value: "10000-25000" },
  { name: "$5K – $10K", value: "5000-10000" },
  { name: "$1K – $5K", value: "1000-5000" },
  { name: "$0 – $1,000", value: "0-1000" },
]

type CustomRange = (number | "*")[]

const DEFAULT_CUSTOM_RANGE: CustomRange = ["*", "*"]

const parseRange = (range?: string) => {
  return range?.split("-").map(s => {
    if (s === "*") return s
    return parseInt(s, 10)
  })
}

const getValue = (value: CustomRange[number]) => {
  return value === "*" || value === 0 ? "" : value
}

export interface PriceRangeFilterProps {
  expanded?: boolean
}

export const PriceRangeFilter: React.FC<PriceRangeFilterProps> = ({
  expanded,
}) => {
  const [mode, setMode] = useState<"resting" | "done">("resting")

  const { currentlySelectedFilters, setFilter } = useArtworkFilterContext()
  // @ts-expect-error PLEASE_FIX_ME_STRICT_NULL_CHECK_MIGRATION
  const { priceRange: initialRange, reset } = currentlySelectedFilters()

  const numericInitialRange = parseRange(initialRange)

  const isCustomRange =
    // Has some kind of price range set (isn't default)
    isCustomValue(initialRange) &&
    // And isn't a pre-defined price range option
    PRICE_RANGES.find(range => range.value === initialRange) === undefined

  const [showCustom, setShowCustom] = useState(isCustomRange)
  const [customRange, setCustomRange] = useState<CustomRange>(
    numericInitialRange ?? DEFAULT_CUSTOM_RANGE
  )

  const handleClick = () => {
    setFilter("priceRange", customRange.join("-"))
    setMode("done")
  }

  const handleChange = (index: number) => ({
    currentTarget: { value },
  }: React.FormEvent<HTMLInputElement>) => {
    const isOpenEnded = value === "" || value === "0"
    setCustomRange(prevCustomRange => {
      const nextCustomRange = [...prevCustomRange]

      if (isOpenEnded) {
        nextCustomRange[index] = "*"
      } else {
        nextCustomRange[index] = parseInt(value, 10)
      }

      return nextCustomRange
    })
  }

  const handleSelect = (selectedOption: string) => {
    if (selectedOption === "custom") {
      setShowCustom(true)
      return
    }

    if (selectedOption !== null) {
      // @ts-expect-error PLEASE_FIX_ME_STRICT_NULL_CHECK_MIGRATION
      setCustomRange(parseRange(selectedOption))
    }

    setShowCustom(false)
    setFilter("priceRange", selectedOption)
  }

  const tokens = useThemeConfig({
    v2: { my: 0.5 },
    v3: { my: 1 },
  })

  // @ts-expect-error PLEASE_FIX_ME_STRICT_NULL_CHECK_MIGRATION<commit_msg>fix: double click on price filter option<commit_after>import { useEffect, useState } from "react"
import * as React from "react"
import {
  Button,
  Flex,
  LabeledInput,
  Message,
  Radio,
  RadioGroup,
  Spacer,
  useThemeConfig,
} from "@artsy/palette"
import { useArtworkFilterContext } from "../ArtworkFilterContext"
import styled from "styled-components"
import { Media } from "v2/Utils/Responsive"
import { themeGet } from "@styled-system/theme-get"
import { FilterExpandable } from "./FilterExpandable"
import { isCustomValue } from "./Utils/isCustomValue"

// Disables arrows in numeric inputs
export const NumericInput = styled(LabeledInput).attrs({ type: "number" })`
  /* Chrome, Safari, Edge, Opera */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  input[type="number"] {
    -moz-appearance: textfield;
  }

  /* HACK: Setting the font-size to a minimum 16px prevents iOS from zooming on focus */
  /* This won't be necessary when upgraded to Palette v3 */
  @media ${themeGet("mediaQueries.xs")} {
    input {
      font-size: 16px;
    }
  }
`

const PRICE_RANGES = [
  { name: "$50K+", value: "50000-*" },
  { name: "$25K – $50K", value: "25000-50000" },
  { name: "$10K – $25K", value: "10000-25000" },
  { name: "$5K – $10K", value: "5000-10000" },
  { name: "$1K – $5K", value: "1000-5000" },
  { name: "$0 – $1,000", value: "0-1000" },
]

type CustomRange = (number | "*")[]

const DEFAULT_CUSTOM_RANGE: CustomRange = ["*", "*"]
const DEFAULT_PRICE_RANGE = "*-*"

const parseRange = (range: string = DEFAULT_PRICE_RANGE) => {
  return range.split("-").map(s => {
    if (s === "*") return s
    return parseInt(s, 10)
  })
}

const getValue = (value: CustomRange[number]) => {
  return value === "*" || value === 0 ? "" : value
}

export interface PriceRangeFilterProps {
  expanded?: boolean
}

export const PriceRangeFilter: React.FC<PriceRangeFilterProps> = ({
  expanded,
}) => {
  const [mode, setMode] = useState<"resting" | "done">("resting")

  const { currentlySelectedFilters, setFilter } = useArtworkFilterContext()
  // @ts-expect-error PLEASE_FIX_ME_STRICT_NULL_CHECK_MIGRATION
  const { priceRange: initialRange, reset } = currentlySelectedFilters()

  const numericInitialRange = parseRange(initialRange)

  const isCustomRange =
    // Has some kind of price range set (isn't default)
    isCustomValue(initialRange) &&
    // And isn't a pre-defined price range option
    PRICE_RANGES.find(range => range.value === initialRange) === undefined

  const [showCustom, setShowCustom] = useState(isCustomRange)
  const [customRange, setCustomRange] = useState<CustomRange>(
    numericInitialRange ?? DEFAULT_CUSTOM_RANGE
  )

  const handleClick = () => {
    setFilter("priceRange", customRange.join("-"))
    setMode("done")
  }

  const handleChange = (index: number) => ({
    currentTarget: { value },
  }: React.FormEvent<HTMLInputElement>) => {
    const isOpenEnded = value === "" || value === "0"
    setCustomRange(prevCustomRange => {
      const nextCustomRange = [...prevCustomRange]

      if (isOpenEnded) {
        nextCustomRange[index] = "*"
      } else {
        nextCustomRange[index] = parseInt(value, 10)
      }

      return nextCustomRange
    })
  }

  const handleSelect = (selectedOption: string) => {
    if (selectedOption === "custom") {
      setShowCustom(true)
      return
    }

    if (selectedOption) {
      setCustomRange(parseRange(selectedOption))
      setFilter("priceRange", selectedOption)
    } else {
      setCustomRange(DEFAULT_CUSTOM_RANGE)
      setFilter("priceRange", DEFAULT_PRICE_RANGE)
    }

    setShowCustom(false)
  }

  const tokens = useThemeConfig({
    v2: { my: 0.5 },
    v3: { my: 1 },
  })

  // @ts-expect-error PLEASE_FIX_ME_STRICT_NULL_CHECK_MIGRATION
{'fraction_non_alphanumeric': 0.1480847703040674, 'fraction_numerical': 0.022377254179281294, 'mean_word_length': 3.6132361870066787, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 31, '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': '6079257', 'n_tokens_mistral': 2620, 'n_tokens_neox': 2485, 'n_words': 575}