import { grid2X2Icon } from '@keystar/ui/icon/icons/grid2X2Icon';
import { fields } from '@keystatic/core';
import { repeating, wrapper } from '@keystatic/core/content-components';

export const gridComponents = {
  Row: repeating({
    label: 'Row',
    icon: grid2X2Icon,
    children: ['Column'], // This defines what can go inside
    schema: {
      style: fields.object({
        cols: fields.integer({
          label: 'Columns',
          defaultValue: 2,
          validation: { min: 2, max: 12 },
        }),
        gap: fields.text({
          label: 'Gap',
          description: 'Enter a variable or value',
        }),
        align: fields.select({
          label: 'Align Items',
          defaultValue: 'flex-start',
          options: [
            { label: 'Start', value: 'flex-start' },
            { label: 'End', value: 'flex-end' },
            { label: 'Center', value: 'center' },
            { label: 'Baseline', value: 'baseline' },
            { label: 'Stretch', value: 'stretch' },
          ],
        }),
        justify: fields.select({
          label: 'Justify Content',
          defaultValue: 'flex-start',
          options: [
            { label: 'Start', value: 'flex-start' },
            { label: 'End', value: 'flex-end' },
            { label: 'Center', value: 'center' },
            { label: 'Space Between', value: 'space-between' },
            { label: 'Space Around', value: 'space-around' },
            { label: 'Evenly', value: 'evenly' },
            { label: 'Stretch', value: 'stretch' },
            { label: 'Baseline', value: 'baseline' },
          ],
        }),
      }),
    },
  }),
  Column: wrapper({
    label: 'Column',
    forSpecificLocations: true,
    schema: {
      style: fields.object({
        colspan: fields.integer({
          label: 'Colspan',
          defaultValue: 1,
        }),
      }),
    },
  }),
};
