import React from 'react';
import type { ComponentConfig } from '@measured/puck';
import { DropZone } from '@measured/puck';
import type { ColumnsProps } from '../../types';

const COLUMN_CONFIGS = {
  '2': { count: 2, classes: 'grid-cols-1 md:grid-cols-2' },
  '3': { count: 3, classes: 'grid-cols-1 md:grid-cols-3' },
  '4': { count: 4, classes: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4' },
  '2-1': { count: 2, classes: 'grid-cols-1 md:grid-cols-3', colSpans: ['md:col-span-2', 'md:col-span-1'] },
  '1-2': { count: 2, classes: 'grid-cols-1 md:grid-cols-3', colSpans: ['md:col-span-1', 'md:col-span-2'] },
};

const GAP_CLASSES = {
  none: 'gap-0',
  small: 'gap-4',
  medium: 'gap-6',
  large: 'gap-8',
};

const ALIGN_CLASSES = {
  top: 'items-start',
  center: 'items-center',
  bottom: 'items-end',
  stretch: 'items-stretch',
};

export const Columns: ComponentConfig<ColumnsProps> = {
  label: 'Columns',
  fields: {
    columns: {
      type: 'select',
      options: [
        { label: '2 Columns', value: '2' },
        { label: '3 Columns', value: '3' },
        { label: '4 Columns', value: '4' },
        { label: '2:1 Ratio', value: '2-1' },
        { label: '1:2 Ratio', value: '1-2' },
      ],
    },
    gap: {
      type: 'select',
      options: [
        { label: 'None', value: 'none' },
        { label: 'Small', value: 'small' },
        { label: 'Medium', value: 'medium' },
        { label: 'Large', value: 'large' },
      ],
    },
    verticalAlign: {
      type: 'select',
      options: [
        { label: 'Top', value: 'top' },
        { label: 'Center', value: 'center' },
        { label: 'Bottom', value: 'bottom' },
        { label: 'Stretch', value: 'stretch' },
      ],
    },
    stackOnMobile: {
      type: 'radio',
      label: 'Stack on Mobile',
      options: [
        { label: 'Yes', value: true },
        { label: 'No', value: false },
      ],
    },
  },
  defaultProps: {
    columns: '2',
    gap: 'medium',
    verticalAlign: 'top',
    stackOnMobile: true,
  },
  render: ({ columns, gap, verticalAlign, stackOnMobile }) => {
    const config = COLUMN_CONFIGS[columns] || COLUMN_CONFIGS['2'];
    const gapClass = GAP_CLASSES[gap] || GAP_CLASSES.medium;
    const alignClass = ALIGN_CLASSES[verticalAlign] || ALIGN_CLASSES.top;

    // Generate column elements
    const columnElements = Array.from({ length: config.count }).map((_, index) => {
      const colSpan = config.colSpans?.[index] || '';
      return (
        <div key={index} className={colSpan}>
          <DropZone zone={`column-${index}`} />
        </div>
      );
    });

    return (
      <div className={`grid ${config.classes} ${gapClass} ${alignClass}`}>
        {columnElements}
      </div>
    );
  },
};

export default Columns;
