import React from 'react';
import { __ } from '@wordpress/i18n';
import { FieldContainer } from '@divi/module';
import { TextContainer, SelectContainer } from '@divi/field-library';

type AdditionalProvider = {
  additional_provider: string;
  additional_query_id: string;
};

export interface CustomRepeaterProps<T = any> {
  attrs: { [key: string]: { innerContent: AdditionalProvider[] } };
  setAttrs: (newAttrs: Partial<{ [key: string]: { innerContent: AdditionalProvider[] } }>) => void;
  attrName: string;
  providers: { value: string; label: string }[];
}

export const CustomRepeater = <T extends Record<string, any>>(
  props: CustomRepeaterProps<T>
): React.ReactElement => {
  const { attrs, setAttrs, attrName, providers } = props;

  const repeaterData: AdditionalProvider[] = attrs?.[attrName]?.innerContent || [];

  const updateItem = (index: number, key: keyof AdditionalProvider, value: string) => {
    const updated = [...repeaterData];
    updated[index] = {
      ...updated[index],
      [key]: value
    };
    setAttrs({
      [attrName]: {
        innerContent: updated
      }
    });
  };

  const addItem = () => {
    setAttrs({
      [attrName]: {
        innerContent: [
          ...repeaterData,
          { additional_provider: '', additional_query_id: '' }
        ]
      }
    });
  };

  const removeItem = (index: number) => {
    const updated = [...repeaterData];
    updated.splice(index, 1);
    setAttrs({
      [attrName]: {
        innerContent: updated
      }
    });
  };

  return (
    <div className="custom-repeater">
      {repeaterData.map((item, index) => (
        <div
          key={index}
          style={{
            border: '1px solid #ddd',
            padding: '12px',
            marginBottom: '12px',
            borderRadius: '6px',
            background: '#f9f9f9'
          }}
        >
          <FieldContainer
            attrName={`${attrName}.innerContent.${index}.additional_provider`}
            label={__('Additional Provider', 'jet-engine-divi-views')}
            description=""
          >
            <SelectContainer
              options={providers}
              value={item.additional_provider}
              onChange={(val: string) => updateItem(index, 'additional_provider', val)}
            />
          </FieldContainer>
          <FieldContainer
            attrName={`${attrName}.innerContent.${index}.additional_query_id`}
            label={__('Additional Query ID', 'jet-engine-divi-views')}
            description=""
          >
            <TextContainer
              value={item.additional_query_id}
              onChange={(val: string) => updateItem(index, 'additional_query_id', val)}
            />
          </FieldContainer>
          <button
            onClick={() => removeItem(index)}
            style={{ marginTop: '8px', color: 'red' }}
          >
            {__('Remove', 'jet-engine-divi-views')}
          </button>
        </div>
      ))}
      <button onClick={addItem}>{__('Add Provider', 'jet-engine-divi-views')}</button>
    </div>
  );
};