interface Option {
  value: string | number;
  label: string;
  op_op_key_value?: string;
  selected?: boolean | number;
  color_code?: string | null;
  subAttributes?: SubAttribute[];
  price_value?:
    | {
        value: number;
        name: string;
      }
    | [];
}

interface SubAttribute {
  label?: string;
  type: string;
  name: string;
  op_op_op_id?: string;
  op_op_key_value?: string;
  select?: {
    onChange: string;
    options: Option[];
  };
  options?: Option[];
  input?: {
    onKeyup: string;
    placeholder: string;
  };
  onChange?: string | any;
  upcharge?: any[];
}

interface Pattern {
  label: string;
  type: string;
  name: string;
  options: Option[];
}

interface MinMaxHeightWidth {
  minw: number;
  minh: number;
  maxh: number;
  maxw: number | null;
}

interface AttributeOption {
  value: string;
  label: string;
  selected: number;
  option_type: number;
  option_id: number;
  contribute_price: {
    value: number;
    name: string;
  };
  upcharge:
    | {
        value: number;
        name: string;
      }
    | [];
  subAttributes: SubAttribute[];
}

interface Attribute {
  label: string;
  name: string;
  type: string;
  attributes_type: number;
  options: AttributeOption[];
}

interface AttrData {
  fraction_w: number;
  fraction_h: number;
  patterns: Pattern[];
  main_price: number;
  discount: number;
  MinMaxHeightWidth: MinMaxHeightWidth;
  attributes: Attribute[];
}

export interface ApiResponse {
  status: string;
  code: number;
  message: string;
  data: AttrData;
}
interface Field {
  name: string;
  type: string; // The field type like "input_with_select", "select_with_input", etc.
  value: any;
  options?: string[]; // Optional, for select/multiselect types
}
const InputOrSelectField = ({ element }: { element: Field }) => {
  switch (element.type) {
    case "input_with_select":
      return (
        <div key={element.name}>
          <label>{element.name}</label>
          <input type="text" value={element.value} readOnly />
          <select>
            {element.options?.map((option, index) => (
              <option key={index} value={option}>
                {option}
              </option>
            ))}
          </select>
        </div>
      );
    case "select_with_input":
      return (
        <div key={element.name}>
          <label>{element.name}</label>
          <select>
            {element.options?.map((option, index) => (
              <option key={index} value={option}>
                {option}
              </option>
            ))}
          </select>
          <input type="text" value={element.value} readOnly />
        </div>
      );
    case "input":
      return (
        <div key={element.name}>
          <label>{element.name}</label>
          <input type="text" value={element.value} readOnly />
        </div>
      );
    case "multi_select":
      return (
        <div key={element.name}>
          <label>{element.name}</label>
          <select multiple>
            {element.options?.map((option, index) => (
              <option key={index} value={option}>
                {option}
              </option>
            ))}
          </select>
        </div>
      );
    default:
      return (
        <div key={element.name}>
          <label>{element.name}</label>
          <input type="text" value="Unknown Element" readOnly />
        </div>
      );
  }
};

function mapObjectWithArrayValues<T>(
  obj: Record<string, any>
): { key: string; value: any }[] {
  return Object.entries(obj).map(([key, value]) => ({
    key,
    value,
  }));
}

interface MyFormProps {
  data: Record<string, any>;
}

export function RenderForm({ data }: MyFormProps) {
  // if (Array.isArray(data)) {
  const mappedData = mapObjectWithArrayValues(data);
  if (mappedData.length > 0) {
    return (
      <div>
        {mappedData.map(({ key, value }) => (
          <div key={key}>
            {"type" in value ? (
              <div>{value.type}</div>
            ) : (
              <div>{JSON.stringify(value)}</div>
            )}
            {/* <label>{key}</label>
            {typeof value === "object" && value !== null ? (
              <RenderForm data={value} /> // Recursively call for nested objects
            ) : (
              <input type="text" value={String(value)} readOnly />
            )} */}
          </div>
        ))}
      </div>
    );
    // return <div>{JSON.stringify(a)}</div>;
  } else
    return (
      <div>
        {/* {a} */}
        {data[0]}
        {/* {data.map((item, index) => (
          <div key={index}>
            {
              item.type && (
                <div>
                  <h4>{item.label}</h4>
                  <RenderForm data={item} />
                </div>
              )
              // : (
              //   <RenderForm data={item} />
              // )
            }
          </div>
        ))} */}
      </div>
    );
  // } else if (typeof data === "object" && data !== null) {
  //   return <div>{JSON.stringify(data)}</div>;
  //   // <RenderForm data={data} />;
  // } else {
  //   return <div>{JSON.stringify(data)}</div>;
  //   // <InputOrSelectField element={data} />;
  // }
}