import React, { Fragment, ReactElement } from 'react';
import './ColorPicker.scss';
import { Variant } from '../types/VariantTypes';

interface Props {
  onChangeVariant: (variantData: Variant) => void;
  selectedVariantId: string;
  variantsDataArray: Array<Variant>;
}

export const ColorPicker = (props: Props): ReactElement<HTMLDivElement> => (
  <div className="variant-color-picker">
    {props.variantsDataArray.map((variantData: Variant, index: number) => (
      <div
        key={index}
        className={'specific_product_colors'}
        data-sold-out={variantData.can_sell ? 'false' : 'true'}
        onClick={(): void => props.onChangeVariant(variantData)}
      >
        <Fragment>
          {variantData.color_swatch_image_url ? (
            <img
              className={'specific_background_color'}
              src={variantData.color_swatch_image_url}
              data-color-selected={
                props.selectedVariantId == variantData.id ? 'true' : 'false'
              }
            />
          ) : (
            <span
              className={'specific_background_color'}
              data-color-code={variantData.color.toLowerCase()}
              data-color-selected={
                props.selectedVariantId == variantData.id ? 'true' : 'false'
              }
            />
          )}
          {!variantData.can_sell && (
            <svg
              className="sold-out-svg"
              version="1.1"
              x="0px"
              y="0px"
              viewBox="0 0 18 18"
            >
              <line
                style={{
                  stroke: '#bebebe',
                  strokeWidth: '2',
                }}
                x1="18"
                y1="0"
                x2="0"
                y2="18"
                shapeRendering="optimizeQuality"
              />
            </svg>
          )}
        </Fragment>
      </div>
    ))}
  </div>
);