import { IColorCellProps, SwatchColorPicker } from '@fluentui/react/lib/SwatchColorPicker';

const colorCellsExample = [
  { id: 'a', label: 'orange', color: '#ca5010' },
  { id: 'b', label: 'cyan', color: '#038387' },
  { id: 'c', label: 'blueMagenta', color: '#8764b8' },
  { id: 'd', label: 'magenta', color: '#881798' },
  { id: 'e', label: 'white', color: '#ffffff' },
];

export const SwatchColorPickerBasicExample: React.FunctionComponent = () => {
  const [previewColor, setPreviewColor] = React.useState<string>();
  const baseId = useId('colorpicker');

  const swatchColorPickerOnCellHovered = (id: string, color: string) => {
    setPreviewColor(color!);
  };

  return (
    <>
      <div id={`${baseId}-custom-size`}>Simple square swatch color picker</div>
      <SwatchColorPicker
        columnCount={5}
        cellHeight={35}
        cellWidth={35}
        cellShape={'square'}
        colorCells={colorCellsExample}
        onCellHovered={swatchColorPickerOnCellHovered}
        aria-labelledby={`${baseId}-custom-size`}
      />
    </>
  );
};

<SwatchPicker aria-label="Font color">
  <ColorSwatch color="#FF1921" value="FF1921" aria-label="Red" />
  <ColorSwatch color="#FFC12E" value="FFC12E" aria-label="Orange" />
  <ColorSwatch color="FEFF37" value="FEFF37" aria-label="Yellow" />
  <ColorSwatch color="00B053" value="00B053" aria-label="Green" />
  <ColorSwatch color="00AFED" value="00AFED" aria-label="Light Blue" />
  <ColorSwatch color="006EBD" value="006EBD" aria-label="Blue" />
  <ColorSwatch color="712F9E" value="712F9E" aria-label="Purple" icon={<SomeIcon />} />
  <ImageSwatch src="./path/image1.png" value="space-craft-img" disabled aria-label="Space craft" />
  <ImageSwatch src="./path/image2.png" value="planets-img" aria-label="Planets" />
</SwatchPicker>

import { renderSwatchPickerGrid } from '@fluentui/react-swatch-picker';

<SwatchPicker
  layout="grid"
  aria-label="SwatchPicker default"
  selectedValue={selectedValue}
  onSelectionChange={handleSelect}
>
  {renderSwatchPickerGrid({
    items,
    columnCount: 3,
    renderRow: ({ children, rowId }) => <SwatchPickerRow key={rowId}>{children}</SwatchPickerRow>,
    renderSwatch: item =>
      item.src ? <ImageSwatch key={item.value} {...item} /> : <ColorSwatch key={item.value} {...item} />,
  })}
</SwatchPicker>

<div role="radiogroup" aria-label="Color grid" class="fui-SwatchPicker">
  <!-- Content rendered here -->
</div>

<div role="grid" aria-label="Color grid" class="fui-SwatchPicker">
  <!-- Content rendered here -->
</div>

<div role="row">
  <!-- Content rendered here -->
</div>

<button
  aria-label="Pink"
  role="radio"
  aria-checked="true"
  style="--fui-SwatchPicker--color: #ff0099"
  class="fui-ColorSwatch">
</button>

<button
  aria-label="Pink"
  role="gridcell"
  aria-selected="true"
  style="--fui-SwatchPicker--color: #ff0099"
  class="fui-ColorSwatch">
</button>

<button
  aria-label="Image name"
  role="radio"
  aria-checked="true"
  style="background-image: url({url})"
  class="fui-ImageSwatch"
>
</button>

<button
  aria-label="Image name"
  role="gridcell"
  aria-selected="true"
  style="background-image: url({url})"
  class="fui-ImageSwatch"
>
</button>