import { useState } from 'react'
import PriceItem from '../PriceItem'
import styles from './styles.module.css'
import { useDispatch } from 'react-redux'
import { actions } from '@/store'

export interface IPrice {
    id: number
    value: number
}

const prices: IPrice[] = [
    {
        id: 1,
        value: 0
    },
    {
        id: 2,
        value: 5
    },
    {
        id: 3,
        value: 9
    },
    {
        id: 4,
        value: 13.67
    },
]

interface PriceListProps {
  activeItem: number | null
  click: () => void
}

function PriceList({click}: PriceListProps): JSX.Element {
  const dispatch = useDispatch();
  const [activePriceItem, setActivePriceItem] = useState<number | null>(null)

  const priceItemClick = (id: number) => {
    console.log(id);
    setActivePriceItem(id)
    const activePriceItem = prices.find((item) => item.id === Number(id))
    if (activePriceItem) {
      dispatch(
        actions.payment.update({
          selectedPrice: activePriceItem.value
        })
      );
    }
    setTimeout(() => {
      click()
    }, 1000)
  }

  return (
    <div className={`${styles.container}`}>
      {prices.map((price, idx) => (
        <PriceItem active={price.id === activePriceItem} key={idx} value={price.value} id={price.id} click={priceItemClick} />
      ))}
    </div>
  )
}

export default PriceList