import React, { useEffect } from 'react';
import { AttributesT } from '../../../utils/constants';
import s from './WheelColor.module.scss';
import productStyle from './../Product.module.scss';
import { StandardItem } from '../../StandardItem/StandardItem';
import { useAttribute } from '@threekit-tools/treble/dist';
import { useStoreDispatch } from '../../../App';
import { SetActiveItem } from '../../../store/actions/Settings';
import { getActualTitle, getProductParameters } from '../Product';
import { useLocation } from 'react-router-dom';
import { SimpleItem } from '../../SimpleItem/SimpleItem';

export const WheelColor = ({ ...props }) => {
  const name: AttributesT = props.name;
  const [attribute, setAttribute]: any = useAttribute(name);

  return (
    <div className={productStyle.product__wrapper}>
      {attribute.values.map((item: any, index: number) => {
        const data = getProductParameters({
          item,
          attribute,
          setAttribute,
          hintPosition: 'bottom',
          name,
        });

        return <SimpleItem {...data} key={`${item.value}-${index}`} />;
      })}
    </div>
  );
};