/**
* External dependencies
*/
import { capitalize } from 'lodash';
import { useDispatch, useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { Button, Path, SVG, ToolbarGroup } from '@wordpress/components';
import {
store as blockEditorStore,
// @ts-expect-error missing type
} from '@wordpress/block-editor';
/**
* Internal dependencies
*/
import { PatternWithBlocks } from '~/customize-store/types/pattern';
import { PATTERN_CATEGORIES } from '../sidebar/pattern-screen/categories';
import { usePatternsByCategory } from '../hooks/use-patterns';
// This is the icon that is used in the Shuffle button. Currently we are using an outdated version of @wordpress/icons.
// import { shuffle } from '@wordpress/icons';
// Copied-pasted from a recent version of @wordpress/icons
const shuffleIcon = (
);
const getCategoryLabelFromCategories = ( categories: string[] ) => {
for ( const category in PATTERN_CATEGORIES ) {
if ( categories.includes( category ) ) {
return PATTERN_CATEGORIES[
category as keyof typeof PATTERN_CATEGORIES
].label;
}
}
};
/**
* Selects a random pattern from the provided array that is not the current pattern.
* If the randomly selected pattern is the same as the current, it attempts to select the next pattern in the array.
* If the current pattern is the last in the array, it selects the first pattern.
* If there's only one pattern in the array, it will return that pattern.
*/
const getNextPattern = (
patterns: PatternWithBlocks[],
patternName: string
) => {
const numberOfPatterns = patterns.length;
const currentPatternIndex = patterns.findIndex(
( { name } ) => name === patternName
);
const nextPatternIndex = Math.floor( Math.random() * numberOfPatterns );
if ( nextPatternIndex !== currentPatternIndex ) {
return patterns[ nextPatternIndex ];
}
if ( currentPatternIndex === nextPatternIndex ) {
if ( nextPatternIndex === 0 ) {
return patterns[ 1 ];
}
if ( nextPatternIndex === numberOfPatterns ) {
return patterns[ 0 ];
}
return patterns[ nextPatternIndex - 1 ];
}
return patterns[ 0 ];
};
export default function Shuffle( { clientId }: { clientId: string } ) {
const {
category,
patternName,
}: {
category: string;
patternName: string;
} = useSelect(
( select ) => {
// @ts-expect-error missing type
const { getBlockAttributes } = select( blockEditorStore );
const attributes = getBlockAttributes( clientId );
const categories = attributes?.metadata?.categories;
// We know that the category is one of the keys of PATTERN_CATEGORIES.
const _category = Object.keys( PATTERN_CATEGORIES ).find( ( cat ) =>
categories?.includes( cat )
) as string;
const _patternName = attributes?.metadata?.patternName;
return {
category: _category,
patternName: _patternName,
};
},
[ clientId ]
);
const { patterns } = usePatternsByCategory( category );
// @ts-expect-error missing type
const { replaceBlocks } = useDispatch( blockEditorStore );
if ( patterns.length === 0 ) {
return null;
}
const categoryLabel = getCategoryLabelFromCategories( [ category ] );
return (
);
}