import { BaseControl } from '@wordpress/components';
import { useInstanceId } from '@wordpress/compose';
import { LKSProductCardControlProps } from '../../type';
import {
  LKSProductCardModuleLayoutOptions,
  LKS_PRODUCT_CARD_MODULE_LAYOUT,
} from '../../constants';
import { RadioGroup } from '../radio-group';

const PREFIX = `lks-product-card__module-layout`;

export const ModuleLayoutControl = ({
  attributes,
  setAttributes,
}: LKSProductCardControlProps) => {
  const instanceId = useInstanceId(ModuleLayoutControl);
  const id = `inspector_${PREFIX}_${instanceId}`;

  return (
    <BaseControl
      __nextHasNoMarginBottom
      label="Module Layout"
      id={id}
      className={PREFIX}
    >
      <RadioGroup<LKS_PRODUCT_CARD_MODULE_LAYOUT>
        value={attributes.moduleLayout}
        options={LKSProductCardModuleLayoutOptions}
        onChange={value => setAttributes({ moduleLayout: value })}
      />
      {/* <div className={`${PREFIX}__options`}>
				{LKSProductCardModuleLayoutOptions.map((option) => (
					<div
						key={option.value}
						onClick={() => setAttributes({ moduleLayout: option.value })}
						className={clsx(`${PREFIX}__options__item`, {
							[`${PREFIX}__options__item--active`]:
								attributes.moduleLayout === option.value,
						})}
					>
						<div className={`${PREFIX}__options__item__thumbnail`}>
							<img
								src={option.thumbnail}
								className={`${PREFIX}__options__item__thumbnail__img`}
							/>
						</div>
						<label className={`${PREFIX}__options__item__label`}>
							<div
								className={clsx(`${PREFIX}__options__item__label__dot`, {
									[`${PREFIX}__options__item__label__dot--active`]:
										attributes.moduleLayout === option.value,
								})}
							/>
							<div className={`${PREFIX}__options__item__label__text`}>
								{option.label}
							</div>
						</label>
					</div>
				))}
			</div> */}
    </BaseControl>
  );
};