import { StringCaser } from "@/components/WebExportReact/src/utils/helpers";
import { layoutImports } from "../utils/layoutImports";
import {
  findComponentsByKeyValue,
  generateComponentId,
  generateComponentId2,
} from "../utils/helpers";
import {
  generateRecyclerAdapter,
  generateStaticRecyclerDataClass,
  generateViewHolderName,
  buildRecyclerViewHolder,
} from "../utils/recycler";
import { cameraXML } from "../utils/camera";
import { useContext, useEffect } from "react";
import {
  generateBottomSheetFragment,
  getBottomSheetFragmentName,
  getBottomSheetLayoutName,
  wrapBottomSheet,
} from "../utils/bottomSheet";
import {
  buildCarouseloViewHolder,
  generateCarouselAdapter,
  generateStaticCarouselDataClass,
} from "../utils/carousel";
import { videoRecorderXML } from "../utils/recorder";
import AttrsAppBarDrawer from "../flatfile/AttrsAppBarDrawer";
import { javaReservedWords } from "../flatfile/AttrsStrings";

const buildFragment = (fragment, configuration) => {
  let uiTemplate = xml(fragment, configuration);
  let content = [];

  if (fragment?.components?.length) {
    for (let component of fragment?.components) {
      content.push(generateComponent(component, fragment?.container));
    }
  }
  // console.log(uiTemplate.replace("{{{CONTENT}}}", content.join("\n")))
  return uiTemplate.replace("{{{CONTENT}}}", content.join("\n"));
};

const copyList = [];

let configuration = null;
let currentFragment = null;
export default (_configuration, fragments) => {
  configuration = _configuration;
  for (let fragment of fragments) {
    currentFragment = fragment;
    const fragmentName = StringCaser(fragment?.name, {
      casetype: "lowercase",
      separator: "_",
    });
    copyList.push({
      fileName: `app/src/main/res/layout/fragment_${fragmentName}.xml`,
      content: buildFragment(fragment, configuration),
    });
  }

  return copyList;
};

const xml = (fragment, configuration) => {
  return `<?xml version="1.0" encoding="utf-8"?>
<${
    typeof layoutImports[fragment?.container] === "undefined"
      ? "LinearLayout"
      : layoutImports[fragment?.container]
  } xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:animateLayoutChanges="true"
        ${
          fragment?.container == "LinearLayout"
            ? `android:orientation="vertical"`
            : ""
        }
        ${
          typeof layoutImports[fragment?.container] === "undefined"
            ? `android:orientation="vertical"`
            : ""
        }
        >

        ${
          fragment?.name == "home"
            ? AttrsAppBarDrawer(configuration?.appBar, fragment?.name)
            : ""
        }
        ${AttrsAppBarDrawer(configuration?.appBar, fragment?.name)}
        
        {{{CONTENT}}}

</${
    typeof layoutImports[fragment?.container] === "undefined"
      ? "LinearLayout"
      : layoutImports[fragment?.container]
  }>
`;
};

export const generateComponent = (component, layout) => {
  switch (component?.type) {
    case "layout":
      return buildLayout(component, layout);
    case "element":
      return buildElement(component, layout);
    case "control":
      return buildControl(component, layout);
    default:
      return ``;
  }
};

const buildLayout = (component, layout) => {
  switch (component?.name) {
    case "ScrollViewLayout":
    case "ScrollView":
      return buildScrollViewLayout(component, layout);
    case "GridLayout":
      return buildGridLayout(component, layout);
    case "LinearLayout":
      return buildLinearLayout(component, layout);
    case "RelativeLayout":
      return buildRelativeLayout(component, layout);
    case "FrameLayout":
      return buildFrameLayout(component, layout);
    case "ConstraintLayout":
      return buildConstraintLayout(component, layout);
    case "TableLayout":
      return buildTableLayout(component, layout);
    case "CardView":
      return buildCardView(component, layout);
    case "RecyclerView":
      return buildRecyclerViewLayout(component, layout);
    case "CarouselView":
      return buildCarouselViewLayout(component, layout);
    case "CameraView":
      return buildCameraViewLayout(component, layout);
    case "BottomSheet":
      buildBottomSheet(component, layout);
      return buildBottomSheetTrigger(component, layout);
    case "SlidingPaneLayout":
      return buildSlidingPaneLayout(component, layout);
    case "CreateFormLayout":
      return buildCreateFormLayout(component, layout);
    case "EditFormLayout":
      return buildEditFormLayout(component, layout);
    case "ChatUi":
      return buildChatUi(component, layout);
    case "ChatBotUi":
      return buildChatBotUi(component, layout);
    case "AppBar":
      return buildAppBar(component, layout);
    default:
      return ``;
  }
};
const buildElement = (component, layout) => {
  switch (component?.name) {
    case "TextView":
      return buildTextElement(component, layout);
    case "ImageView":
      return buildImageElement(component, layout);
    case "EditText":
      return buildEditTextElement(component, layout);
    case "Button":
      return buildButtonElement(component, layout);
    case "IconButton":
      return buildIconButtonElement(component, layout);
    case "StripePaymentButton":
      return buildStripePaymentButtonElement(component, layout);
    case "CheckBox":
      return buildCheckBoxElement(component, layout);
    case "RadioButton":
      return buildRadioButtonElement(component, layout);
    case "ProgressBar":
      return buildProgressBarElement(component, layout);
    case "ToggleButton":
      return buildToggleButtonElement(component, layout);
    case "Switch":
      return buildSwitchElement(component, layout);
    case "SeekBar":
      return buildSeekBarElement(component, layout);
    case "RatingBar":
      return buildRatingBarElement(component, layout);
    case "Spinner":
      return buildSpinnerElement(component, layout);
    case "ListView":
      return buildListViewElement(component, layout);
    case "WebView":
      return buildWebViewElement(component, layout);
    case "VideoView":
      return buildVideoViewElement(component, layout);
    case "SearchView":
      return buildSearchViewElement(component, layout);
    case "CalendarView":
      return buildCalendarViewElement(component, layout);
    case "TableRow":
      return buildTableRowLayout(component, layout);
    case "TimePickerDialog":
      return buildTimePickerDialogElement(component, layout);
    case "DatePickerDialog":
      return buildDatePickerDialogElement(component, layout);
    case "LineChart":
      return buildLineChartElement(component, layout);
    case "PieChart":
      return buildPieChartElement(component, layout);
    case "BarChart":
      return buildBarChartElement(component, layout);
    case "QrCodeScanner":
      return buildQrCodeScannerElement(component, layout);
    case "ColorPicker":
      return buildColorPickerElement(component, layout);
    case "DropDown":
      return buildDropDownElement(component, layout);
    case "StripePayment":
      return buildStripePayment(component, layout);
    case "RadioGroup":
      return buildRadioGroupElement(component, layout);

    default:
      return ``;
  }
};
const buildControl = (component, layout) => {
  switch (component?.name) {
    default:
      return ``;
  }
};
const isLayoutConstraint = (layout) => layout === "ConstraintLayout";

// test
const slidingPaneLayoutProps = (currentFragment, component) => {
  const layout_weight = component?.props?.layout_weight;
  const width = component?.props?.width;
  const height = component?.props?.height;

  return `
 ${
   layout_weight?.length > 0 ? ` android:layout_weight= "${layout_weight}"` : ""
 }
 ${width?.length > 0 ? `android:layout_width= "${width}"` : ""}
 ${height?.length > 0 ? `android:layout_height= "${height}"` : ""}
 
  `;
};
const constraintLayoutProps = (currentFragment, component) => {
  const start_to_start_of =
    component?.props?.start_to_start_of === "parent"
      ? "parent"
      : `@id/${generateComponentId(
          findComponentsByKeyValue(
            currentFragment,
            "id",
            component?.props?.start_to_start_of
          )[0]
        )}`;
  const start_to_end_of =
    component?.props?.start_to_end_of === "parent"
      ? "parent"
      : `@id/${generateComponentId(
          findComponentsByKeyValue(
            currentFragment,
            "id",
            component?.props?.start_to_end_of
          )[0]
        )}`;
  const end_to_start_of =
    component?.props?.end_to_start_of === "parent"
      ? "parent"
      : `@id/${generateComponentId(
          findComponentsByKeyValue(
            currentFragment,
            "id",
            component?.props?.end_to_start_of
          )[0]
        )}`;
  const end_to_end_of =
    component?.props?.end_to_end_of === "parent"
      ? "parent"
      : `@id/${generateComponentId(
          findComponentsByKeyValue(
            currentFragment,
            "id",
            component?.props?.end_to_end_of
          )[0]
        )}`;
  const top_to_top_of =
    component?.props?.top_to_top_of === "parent"
      ? "parent"
      : `@id/${generateComponentId(
          findComponentsByKeyValue(
            currentFragment,
            "id",
            component?.props?.top_to_top_of
          )[0]
        )}`;
  const top_to_bottom_of =
    component?.props?.top_to_bottom_of === "parent"
      ? "parent"
      : `@id/${generateComponentId(
          findComponentsByKeyValue(
            currentFragment,
            "id",
            component?.props?.top_to_bottom_of
          )[0]
        )}`;
  const bottom_to_top_of =
    component?.props?.bottom_to_top_of === "parent"
      ? "parent"
      : `@id/${generateComponentId(
          findComponentsByKeyValue(
            currentFragment,
            "id",
            component?.props?.bottom_to_top_of
          )[0]
        )}`;
  const bottom_to_bottom_of =
    component?.props?.bottom_to_bottom_of === "parent"
      ? "parent"
      : `@id/${generateComponentId(
          findComponentsByKeyValue(
            currentFragment,
            "id",
            component?.props?.bottom_to_bottom_of
          )[0]
        )}`;

  return `
 ${
   component?.props?.start_to_start_of.length > 0
     ? ` app:layout_constraintStart_toStartOf= "${start_to_start_of}"`
     : ""
 }
 ${
   component?.props?.start_to_end_of.length > 0
     ? ` app:layout_constraintStart_toEndOf= "${start_to_end_of}"`
     : ""
 }
 ${
   component?.props?.end_to_start_of.length > 0
     ? `  app:layout_constraintEnd_toStartOf= "${end_to_start_of}"`
     : ""
 }
 ${
   component?.props?.end_to_end_of.length > 0
     ? ` app:layout_constraintEnd_toEndOf= "${end_to_end_of}"`
     : ""
 }
 ${
   component?.props?.top_to_top_of.length > 0
     ? ` app:layout_constraintTop_toTopOf= "${top_to_top_of}"`
     : ""
 }
 ${
   component?.props?.top_to_bottom_of.length > 0
     ? ` app:layout_constraintTop_toBottomOf= "${top_to_bottom_of}"`
     : ""
 }
 ${
   component?.props?.bottom_to_top_of.length > 0
     ? ` app:layout_constraintBottom_toTopOf= "${bottom_to_top_of}"`
     : ""
 }
 ${
   component?.props?.bottom_to_bottom_of.length > 0
     ? ` app:layout_constraintBottom_toBottomOf= "${bottom_to_bottom_of}"`
     : ``
 }
 
  `;
};
const relativeLayoutProps = (currentFragment, component) => {
  const aboveSiblingComponent = findComponentsByKeyValue(
    currentFragment,
    "id",
    component?.props?.above
  );
  const belowSiblingComponent = findComponentsByKeyValue(
    currentFragment,
    "id",
    component?.props?.below
  );
  const leftSiblingComponent = findComponentsByKeyValue(
    currentFragment,
    "id",
    component?.props?.toLeftOf
  );
  const rightSiblingComponent = findComponentsByKeyValue(
    currentFragment,
    "id",
    component?.props?.toRightOf
  );
  const centerHorizontal = component?.props?.centerHorizontal;
  const centerVertical = component?.props?.centerVertical;
  const centerInParent = component?.props?.centerInParent;
  const alignParentTop = component?.props?.alignParentTop;
  const alignParentLeft = component?.props?.alignParentLeft;
  const alignParentRight = component?.props?.alignParentRight;
  const alignParentBottom = component?.props?.alignParentBottom;
  return `
 ${
   component?.props?.above
     ? `android:layout_above= "@id/${generateComponentId(
         aboveSiblingComponent?.[0]
       )}"`
     : ""
 }
 ${
   component?.props?.below
     ? `android:layout_below= "@id/${generateComponentId(
         belowSiblingComponent?.[0]
       )}"`
     : ""
 }
 ${
   component?.props?.toLeftOf && leftSiblingComponent?.[0]
     ? `android:layout_toLeftOf= "@id/${generateComponentId(
         leftSiblingComponent?.[0]
       )}"`
     : ""
 }
 ${
   component?.props?.toRightOf && rightSiblingComponent?.[0]
     ? `android:layout_toRightOf= "@id/${generateComponentId(
         rightSiblingComponent?.[0]
       )}"`
     : ""
 }
 ${
   centerHorizontal?.length > 0
     ? `android:layout_centerHorizontal= "${centerHorizontal}"`
     : ""
 }
 ${
   centerVertical?.length > 0
     ? ` android:layout_centerVertical= "${centerVertical}"`
     : ""
 }
 ${
   centerInParent?.length > 0
     ? `android:layout_centerInParent= "${centerInParent}"`
     : ""
 }
 ${
   alignParentTop?.length > 0
     ? `android:layout_alignParentTop= "${alignParentTop}"`
     : ""
 }
 ${
   alignParentLeft?.length > 0
     ? `android:layout_alignParentLeft= "${alignParentLeft}"`
     : ""
 }
 ${
   alignParentRight?.length > 0
     ? `android:layout_alignParentRight= "${alignParentRight}"`
     : ""
 }
 ${
   alignParentBottom?.length > 0
     ? `android:layout_alignParentBottom= "${alignParentBottom}"`
     : ""
 }
  `;
};

const generateLayoutProps = (currentFragment, component, layout) => {
  if (
    currentFragment?.container === "RelativeLayout" ||
    component?.parentName === "RelativeLayout"
  ) {
    return relativeLayoutProps(currentFragment, component);
  } else if (
    currentFragment?.container === "ConstraintLayout" ||
    component?.parentName === "ConstraintLayout"
  ) {
    return constraintLayoutProps(currentFragment, component);
  } else if (
    currentFragment?.container === "SlidingPaneLayout" ||
    component?.parentName === "SlidingPaneLayout"
  ) {
    return slidingPaneLayoutProps(currentFragment, component);
  } else {
    return ` `;
  }
};

const buildTextElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  if (!textLocation) return;
  if (!isNaN(textLocation?.[0]) || javaReservedWords?.includes(textLocation))
    textLocation = "_" + textLocation;

  return `<TextView
  android:id="@+id/${generateComponentId(component)}"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_marginStart="@dimen/_10sdp"
  android:text="@string/${textLocation ?? "default_text"}"
  ${generateLayoutProps(currentFragment, component, layout)}
  ${isLayoutConstraint(layout) ? 'tools:ignore="MissingConstraints"' : ""}/>`;
};
const buildEditTextElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  if (!textLocation) return;
  if (!isNaN(textLocation?.[0]) || javaReservedWords.includes(textLocation))
    textLocation = "_" + textLocation;

  return `<EditText
    android:id="@+id/${generateComponentId(component)}"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/_10sdp"
    android:hint="@string/${textLocation}"

    ${generateLayoutProps(currentFragment, component, layout)} 
    
    ${isLayoutConstraint(layout) ? 'tools:ignore="MissingConstraints"' : ""}/>`;
};
const buildButtonElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });

  if (!isNaN(textLocation?.[0]) || javaReservedWords.includes(textLocation))
    textLocation = "_" + textLocation;
  return `<Button
    android:id="@+id/${generateComponentId(component)}"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/${textLocation}"
    ${generateLayoutProps(currentFragment, component, layout)} 
    />`;
};
const buildIconButtonElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  if (!isNaN(textLocation?.[0]) || javaReservedWords.includes(textLocation))
    textLocation = "_" + textLocation;

  return `

    <LinearLayout
    android:id="@+id/${generateComponentId(component)}"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center"
    ${generateLayoutProps(currentFragment, component, layout)} 
    >

    <ImageView
        android:id="@+id/iV${generateComponentId(component)}"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_default"
        android:layout_gravity="center_horizontal" />

    <TextView
        android:id="@+id/tv${generateComponentId(component)}"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="${textLocation}"
        android:layout_gravity="center_horizontal"/>

</LinearLayout>
    
    
    `;
};

const buildStripePaymentButtonElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  if (!isNaN(textLocation?.[0]) || javaReservedWords.includes(textLocation))
    textLocation = "_" + textLocation;

  return `<Button
    android:id="@+id/${generateComponentId(component)}"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/${textLocation}"
    ${generateLayoutProps(currentFragment, component, layout)} 
    />`;
};

const buildCheckBoxElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  if (!isNaN(textLocation?.[0]) || javaReservedWords?.includes(textLocation))
    textLocation = "_" + textLocation;

  return `<CheckBox
  android:id="@+id/${generateComponentId(component)}"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/${textLocation}"
    ${isLayoutConstraint(layout) ? 'tools:ignore="MissingConstraints"' : ""}
    ${generateLayoutProps(currentFragment, component, layout)} 
    />`;
};

const buildRadioButtonElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  if (!isNaN(textLocation?.[0]) || javaReservedWords.includes(textLocation))
    textLocation = "_" + textLocation;

  return `<RadioButton
  android:id="@+id/${generateComponentId(component)}"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/${textLocation}"
    ${isLayoutConstraint(layout) ? 'tools:ignore="MissingConstraints"' : ""}
    ${generateLayoutProps(currentFragment, component, layout)} 
    />`;
};

const buildProgressBarElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });

  return `<ProgressBar
  android:id="@+id/${generateComponentId(component)}"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@android:style/Widget.ProgressBar.Small" 
    ${isLayoutConstraint(layout) ? 'tools:ignore="MissingConstraints"' : ""}
    ${generateLayoutProps(currentFragment, component, layout)} 
    />`;
};
const buildToggleButtonElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  if (!isNaN(textLocation?.[0]) || javaReservedWords.includes(textLocation))
    textLocation = "_" + textLocation;

  return `<ToggleButton
  android:id="@+id/${generateComponentId(component)}"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/${textLocation}"
    ${isLayoutConstraint(layout) ? 'tools:ignore="MissingConstraints"' : ""}
    ${generateLayoutProps(currentFragment, component, layout)} 
    />`;
};

const buildSwitchElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  if (!isNaN(textLocation?.[0]) || javaReservedWords.includes(textLocation))
    textLocation = "_" + textLocation;

  return `<Switch
  android:id="@+id/${generateComponentId(component)}"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/${textLocation}"
    ${isLayoutConstraint(layout) ? 'tools:ignore="MissingConstraints"' : ""}
    ${generateLayoutProps(currentFragment, component, layout)} 
    />`;
};

const buildSeekBarElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  return `<SeekBar
  android:id="@+id/${generateComponentId(component)}"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:max="100" 
  ${isLayoutConstraint(layout) ? 'tools:ignore="MissingConstraints"' : ""}
  ${generateLayoutProps(currentFragment, component, layout)} 
  />`;
};
const buildRatingBarElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  return `<RatingBar
  android:id="@+id/${generateComponentId(component)}"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:numStars="5"
  android:rating="0" 
  ${isLayoutConstraint(layout) ? 'tools:ignore="MissingConstraints"' : ""}
  ${generateLayoutProps(currentFragment, component, layout)} 
  />`;
};
const buildSpinnerElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  return `<Spinner
  android:id="@+id/${generateComponentId(component)}"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" 
  ${isLayoutConstraint(layout) ? 'tools:ignore="MissingConstraints"' : ""}
  ${generateLayoutProps(currentFragment, component, layout)} 
  />`;
};
const buildListViewElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  return `<ListView
  android:id="@+id/${generateComponentId(component)}"
  android:layout_width="match_parent"
  android:layout_height="match_parent" 
  ${isLayoutConstraint(layout) ? 'tools:ignore="MissingConstraints"' : ""}
  ${generateLayoutProps(currentFragment, component, layout)} 
  />`;
};

const buildRecyclerViewLayout = (component, layout) => {
  // generate view holder xml
  let name = StringCaser(component.props.name, { casetype: "capitalize" });
  copyList.push({
    fileName: `app/src/main/res/layout/${generateViewHolderName(
      component
    )}.xml`,
    content: buildRecyclerViewHolder(component),
  });
  // generate data class
  copyList.push({
    fileName: `app/src/main/java/com/${configuration.name.toLowerCase()}/app/data/${name}RecyclerData.kt`,
    content: generateStaticRecyclerDataClass(component, configuration),
  });
  // generate adapter
  copyList.push({
    fileName: `app/src/main/java/com/${configuration.name.toLowerCase()}/app/adapters/${name}RecyclerAdapter.kt`,
    content: generateRecyclerAdapter(component, configuration),
  });

  return `<androidx.recyclerview.widget.RecyclerView
  android:id="@+id/${generateComponentId(component)}"
  android:layout_width="match_parent"
  android:layout_height="match_parent" 
  android:paddingBottom="60dp"
  app:layoutManager="${
    component.props.layout_manager === "grid"
      ? "GridLayoutManager"
      : "LinearLayoutManager"
  }"
  ${isLayoutConstraint(layout) ? 'tools:ignore="MissingConstraints"' : ""}
  ${generateLayoutProps(currentFragment, component, layout)} 
  
  />`;
};

const buildCarouselViewLayout = (component, layout) => {
  // generate view holder xml
  let name = StringCaser(component.props.name, { casetype: "capitalize" });
  copyList.push({
    fileName: `app/src/main/res/layout/${generateViewHolderName(
      component
    )}.xml`,
    content: buildCarouseloViewHolder(component),
  });
  // generate data class
  copyList.push({
    fileName: `app/src/main/java/com/${configuration.name.toLowerCase()}/app/data/${name}CarouselData.kt`,
    content: generateStaticCarouselDataClass(component, configuration),
  });
  // generate adapter
  copyList.push({
    fileName: `app/src/main/java/com/${configuration.name.toLowerCase()}/app/adapters/${name}CarouselAdapter.kt`,
    content: generateCarouselAdapter(component, configuration, currentFragment),
  });

  return `<androidx.viewpager2.widget.ViewPager2
  android:id="@+id/${generateComponentId(component)}"
  android:layout_width="match_parent"
  android:layout_height="wrap_content" 
  android:paddingBottom="6dp"
  ${isLayoutConstraint(layout) ? 'tools:ignore="MissingConstraints"' : ""}
  ${generateLayoutProps(currentFragment, component, layout)} 
  
  />`;
};

// const buildStripePayment = (component, layout) => {
//   if (findComponentsWithStripePaymentAction(data, (result = [])).length == 0)
//     return "";
// };

const buildCameraViewLayout = (component, layout) => {
  return cameraXML();
};

const buildBottomSheet = (component, layout) => {
  let children = component?.children
    ?.map((child) => generateComponent(child))
    ?.join("\n");
  copyList.push({
    fileName: `app/src/main/res/layout/${getBottomSheetLayoutName(
      component,
      currentFragment
    )}.xml`,
    content: wrapBottomSheet(children),
  });

  copyList.push({
    fileName: `app/src/main/java/com/${configuration.name.toLowerCase()}/app/ui/fragments/bottomsheets/${getBottomSheetFragmentName(
      component,
      currentFragment
    )}.kt`,
    content: generateBottomSheetFragment(
      component,
      currentFragment,
      configuration
    ),
  });

  return ``;
};

const buildWebViewElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  return `<WebView
  android:id="@+id/${generateComponentId(component)}"
  android:layout_width="match_parent"
  android:layout_height="match_parent" 
  ${isLayoutConstraint(layout) ? 'tools:ignore="MissingConstraints"' : ""}
  ${generateLayoutProps(currentFragment, component, layout)} 
  />`;
};
const buildVideoViewElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  return videoRecorderXML();
};
const buildSearchViewElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });

  return `<androidx.appcompat.widget.SearchView
  android:id="@+id/${generateComponentId(component)}"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" 
  ${isLayoutConstraint(layout) ? 'tools:ignore="MissingConstraints"' : ""}
  ${generateLayoutProps(currentFragment, component, layout)} 
  />`;
};
const buildCalendarViewElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  return `<CalendarView
  android:id="@+id/${generateComponentId(component)}"
  android:layout_width="match_parent"
  android:layout_height="wrap_content" 
  ${isLayoutConstraint(layout) ? 'tools:ignore="MissingConstraints"' : ""}
  ${generateLayoutProps(currentFragment, component, layout)} 
  />`;
};
const buildTimePickerDialogElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  return `
  <Button
    android:id="@+id/${generateComponentId(component)}"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/open_dialog"
    ${isLayoutConstraint(layout) ? 'tools:ignore="MissingConstraints"' : ""}
    ${generateLayoutProps(currentFragment, component, layout)}
    />
  `;
};
const buildDatePickerDialogElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  return `
  <Button
    android:id="@+id/${generateComponentId(component)}"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/open_dialog"
    ${isLayoutConstraint(layout) ? 'tools:ignore="MissingConstraints"' : ""}
    ${generateLayoutProps(currentFragment, component, layout)}
    />
  `;
};
const buildRadioGroupElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  return `<RadioGroup
    android:id="@+id/${generateComponentId(component)}"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    ${generateLayoutProps(currentFragment, component, layout)} 
    >
    
    ${
      component?.children?.length
        ? component?.children
            .map((child) => generateComponent(child, layout))
            .join("\n")
        : ""
    } 
</RadioGroup>`;
};

const buildScrollViewLayout = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  return `<ScrollView
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  ${generateLayoutProps(currentFragment, component, layout)} 
  >

  <!-- Child views go here -->
  ${
    component?.children?.length
      ? component?.children.map((child) => generateComponent(child)).join("\n")
      : ""
  } 

</ScrollView>`;
};
const buildGridLayout = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  return `<GridLayout
  android:id="@+id/${generateComponentId(component)}"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:columnCount="${component?.props?.columns ?? "2"}"
  android:rowCount="${component?.props?.rows ?? "2"}"
  ${generateLayoutProps(currentFragment, component, layout)}
  >

  <!-- Child views go here -->
  ${
    component?.children?.length
      ? component?.children.map((child) => generateComponent(child)).join("\n")
      : ""
  } 

</GridLayout>`;
};
const buildLinearLayout = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  return `<LinearLayout
  android:id="@+id/${generateComponentId(component)}"
  android:layout_width="${component?.props.width ?? "match_parent"}"
  android:layout_height="${component?.props.width ?? "wrap_content"}"
  android:orientation="${component?.props.orientation ?? "vertical"}"
  ${generateLayoutProps(currentFragment, component, layout)}
  >

  <!-- Child views go here -->
  ${
    component?.children?.length
      ? component?.children.map((child) => generateComponent(child)).join("\n")
      : ""
  } 

</LinearLayout>`;
};
const buildRelativeLayout = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  return `<RelativeLayout
  android:id="@+id/${generateComponentId(component)}"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  ${generateLayoutProps(currentFragment, component, layout)}
  >

  <!-- Child views go here -->
  ${
    component?.children?.length
      ? component?.children.map((child) => generateComponent(child)).join("\n")
      : ""
  } 

</RelativeLayout>`;
};
// test
const buildSlidingPaneLayout = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  return `<androidx.slidingpanelayout.widget.SlidingPaneLayout
  android:id="@+id/${generateComponentId(component)}"
  android:layout_width="${component?.props?.width ?? "match_parent"}"
  android:layout_height="${component?.props?.height ?? "match_parent"}">

  <!-- Child views go here -->
  ${
    component?.children?.length
      ? component?.children.map((child) => generateComponent(child)).join("\n")
      : ""
  } 

</androidx.slidingpanelayout.widget.SlidingPaneLayout>`;
};
const buildLineChartElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });

  return `
   <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_weight="2">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Growth rate."
            android:textStyle="bold" android:textAlignment="center" android:layout_marginTop="2dp"/>
        <com.github.mikephil.charting.charts.LineChart
            android:id="@+id/ourLineChart"
            android:layout_marginTop="20dp"
            android:layout_marginRight="10dp"
            android:layout_marginLeft="10dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </LinearLayout>
        `;
};

const buildPieChartElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });

  return `<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:backgroundTint="@color/white"
        android:layout_weight="2">
       <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:cardElevation="10dp"
            app:cardCornerRadius="5dp"
            app:cardMaxElevation="12dp"
            app:cardPreventCornerOverlap="true"
            app:cardUseCompatPadding="true"
            android:layout_marginTop="10dp"
            android:layout_weight="2"
            android:layout_marginBottom="1dp">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Animal no."
                android:textStyle="bold" android:textAlignment="center" android:layout_marginTop="2dp"/>
            <com.github.mikephil.charting.charts.PieChart
                android:id="@+id/ourPieChart"
                android:layout_width="match_parent"
                android:layout_height="match_parent"

                />
        </androidx.cardview.widget.CardView>
        </LinearLayout>`;
};

const buildBarChartElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });

  return `<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:backgroundTint="@color/white"
        android:layout_weight="2">
        <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:cardElevation="10dp"
            app:cardCornerRadius="5dp"
            app:cardMaxElevation="12dp"
            app:cardPreventCornerOverlap="true"
            app:cardUseCompatPadding="true"
            android:layout_marginTop="10dp"
            android:layout_weight="2"
            android:layout_marginBottom="1dp">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Age dist."
                android:textStyle="bold" android:textAlignment="center" android:layout_marginTop="2dp"/>
            <com.github.mikephil.charting.charts.BarChart
                android:id="@+id/ourBarChart"
                android:layout_marginTop="25dp"
                android:layout_marginLeft="7dp"
                android:layout_marginRight="7dp"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                />
        </androidx.cardview.widget.CardView>
        </LinearLayout>`;
};

const buildQrCodeScannerElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });

  return `<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

        <SurfaceView
            android:id="@+id/cameraSurfaceView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <View
            android:id="@+id/barcode_line"
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:background="#951C1C"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>`;
};
const buildChatUi = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });

  // <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  // xmlns:app="http://schemas.android.com/apk/res-auto"
  // xmlns:tools="http://schemas.android.com/tools"
  // android:layout_width="match_parent"
  // android:layout_height="match_parent">

  // <androidx.recyclerview.widget.RecyclerView
  // android:id="@+id/recyclerview_637093b5"
  // android:layout_width="match_parent"
  // android:layout_height="match_parent"
  // android:paddingBottom="60dp"
  // app:layoutManager="LinearLayoutManager"

  // />
  return `


  <com.manaknight.app.widget.SimpleChatView
      android:id="@+id/simpleChatView"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />
      
      
      `;
  // </androidx.constraintlayout.widget.ConstraintLayout>
};
const buildChatBotUi = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });

  // <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  // xmlns:app="http://schemas.android.com/apk/res-auto"
  // xmlns:tools="http://schemas.android.com/tools"
  // android:layout_width="match_parent"
  // android:layout_height="match_parent">

  // <androidx.recyclerview.widget.RecyclerView
  // android:id="@+id/recyclerview_637093b5"
  // android:layout_width="match_parent"
  // android:layout_height="match_parent"
  // android:paddingBottom="60dp"
  // app:layoutManager="LinearLayoutManager"

  // />
  return `


  <com.manaknight.app.widget.SimpleChatView
            android:id="@+id/simpleChatView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
      
      
      `;
  // </androidx.constraintlayout.widget.ConstraintLayout>
};
const buildAppBar = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  return `<RadioGroup
    android:id="@+id/${generateComponentId(component)}"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    ${generateLayoutProps(currentFragment, component, layout)} 
    >

    ${
      component?.children?.length
        ? component?.children
            .map((child) => generateComponent(child))
            .join("\n")
        : ""
    } 
</RadioGroup>

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/${generateComponentId(component)}"
android:layout_width="match_parent"
android:layout_height="@dimen/_30sdp"
android:layout_marginHorizontal="@dimen/_15sdp"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toEndOf="parent"
android:background="@color/black"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">

<ImageView
  android:id="@+id/profile"
  android:layout_width="@dimen/_25sdp"
  android:layout_height="@dimen/_25sdp"
  android:layout_marginEnd="@dimen/_10sdp"
  android:src="@drawable/account"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintEnd_toEndOf="parent"
  app:layout_constraintTop_toTopOf="parent"
  tools:ignore="ContentDescription" />

<ImageView
  android:id="@+id/record"
  android:layout_width="@dimen/_25sdp"
  android:layout_height="@dimen/_25sdp"
  android:layout_marginStart="@dimen/_10sdp"
  android:src="@drawable/ic_videocam"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintStart_toStartOf="parent"
  app:layout_constraintTop_toTopOf="parent"
  app:tint="@color/white"
  tools:ignore="ContentDescription" />
  ${
    component?.children?.length
      ? component?.children.map((child) => generateComponent(child)).join("\n")
      : ""
  } 

<TextView
  android:id="@+id/${generateComponentId(component)}"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="${currentFragment?.name}"
  android:textColor="@color/white"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintEnd_toEndOf="parent"
  app:layout_constraintStart_toStartOf="parent"
  app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>





`;
};

const buildColorPickerElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });

  return `<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:ignore="HardcodedText">

    <TextView
        android:id="@+id/gfg_heading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        android:text="Testing Color"
        android:textSize="42sp"
        android:textStyle="bold" />

    <!--Pick color Button-->
    <Button
        android:id="@+id/pick_color_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        android:layout_marginStart="32dp"
        android:layout_marginEnd="32dp"
        android:text="Pick Color" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        android:textSize="18sp"
        android:text="Your picked color is:" />

    <!--sample view to preview selected color by user-->
    <!--by default this has been set to darker grey-->
    <!--this can be overridden after user choose the
        color from color picker-->
    
    <View
        android:id="@+id/preview_selected_color"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_gravity="center"
        android:background="@android:color/black"
        android:layout_marginTop="8dp" />

    <!--set color button to overwrite the
        color for GeeksforGeeks text-->
    <Button
        android:id="@+id/set_color_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        android:layout_marginStart="32dp"
        android:layout_marginEnd="32dp"
        android:text="Set Color" />

</LinearLayout>`;
};

const buildDropDownElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });

  copyList.push({
    fileName: `app/src/main/res/layout/fragment_dropdown_item.xml`,
    content: buildDropDownItemElement(component),
  });

  return `<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:context=".MainActivity">

    <!--Create a TextInputLayout and choose the style,
        for now we are choosing the OutlinedBox ExposedDropdownMenu -->
    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <!-- Inside text input layout add
            an auto complete text view
                and make its input type to none-->
        <AutoCompleteTextView
            android:id="@+id/${generateComponentId2(component)}"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:inputType="none"
            android:text="Choose Option"
            />

    </com.google.android.material.textfield.TextInputLayout>

</androidx.constraintlayout.widget.ConstraintLayout>`;
};
const buildDropDownItemElement = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });

  return `<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/textView"
    android:layout_width="match_parent"
    android:textColor="@color/black"
    android:textStyle="bold"
    android:padding="14dp"
    android:layout_height="wrap_content"
    android:text="TextView" />`;
};
const buildCreateFormLayout = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });

  return `<LinearLayout
 android:id="@+id/${generateComponentId(component)}"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="${component?.props.orientation ?? "vertical"}"
  ${generateLayoutProps(currentFragment, component, layout)}
  >

  <!-- Child views go here -->
  ${
    component?.children?.length
      ? component?.children.map((child) => generateComponent(child)).join("\n")
      : ""
  } 



</LinearLayout>`;
};

const buildEditFormLayout = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  return `<LinearLayout
  android:id="@+id/${generateComponentId(component)}"
  android:layout_width="${component?.props?.width ?? "match_parent"}"
  android:layout_height="${component?.props?.height ?? "match_parent"}"
  android:orientation="${component?.props.orientation ?? "vertical"}">

  <!-- Child views go here -->
  ${
    component?.children?.length
      ? component?.children.map((child) => generateComponent(child)).join("\n")
      : ""
  } 

</LinearLayout>`;
};
const buildFrameLayout = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  return `<FrameLayout
  android:id="@+id/${generateComponentId(component)}"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  
  >

  <!-- Child views go here -->
  ${
    component?.children?.length
      ? component?.children.map((child) => generateComponent(child)).join("\n")
      : ""
  } 

</FrameLayout>`;
};
const buildConstraintLayout = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  return `<androidx.constraintlayout.widget.ConstraintLayout
  android:id="@+id/${generateComponentId(component)}"
  android:layout_width="${component?.props.width ?? "match_parent"}"
  android:layout_height="${component?.props.width ?? "match_parent"}">

  <!-- Child views go here -->
  ${
    component?.children?.length
      ? component?.children
          .map((child, index) =>
            generateComponent(child, component?.children[index - 1])
          )
          .join("\n")
      : ""
  } 

</androidx.constraintlayout.widget.ConstraintLayout>`;
};
const buildTableLayout = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  return `<TableLayout
  android:id="@+id/${generateComponentId(component)}"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  >

  <!-- Child views go here -->
  ${
    component?.children && component?.children?.length
      ? component?.children?.map((child) => generateComponent(child)).join("\n")
      : ""
  } 

</TableLayout>`;
};
const buildTableRowLayout = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  return `<TableRow>
      ${
        component?.children?.length
          ? component?.children
              ?.map((child) => generateComponent(child))
              .join("\n")
          : ""
      } 
      
  </TableRow>`;
};
const buildBottomSheetTrigger = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  return `<Button
  android:id="@+id/${generateComponentId(component)}"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="@string/open_dialog"
  ${isLayoutConstraint(layout) ? 'tools:ignore="MissingConstraints"' : ""}
  ${generateLayoutProps(currentFragment, component, layout)}
  />`;
};
const buildCardView = (component, layout) => {
  let textLocation = StringCaser(component?.props?.text ?? "default text", {
    casetype: "lowercase",
    separator: "_",
  });
  return `<androidx.cardview.widget.CardView
  android:id="@+id/${generateComponentId(component)}"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:elevation="4dp"
  app:cardCornerRadius="8dp"
  ${generateLayoutProps(currentFragment, component, layout)}
  >

  <!-- Child views go here -->
  ${
    component?.children?.length
      ? component?.children.map((child) => generateComponent(child)).join("\n")
      : ""
  } 

</androidx.cardview.widget.CardView>`;
};

const buildImageElement = (component, layout) => {
  return `<ImageView
      android:layout_width="match_parent"
      android:layout_height="@dimen/_50sdp"
      android:layout_gravity="end"
      android:src="@drawable/ic_loc_active"
    
      
      />`;
};

// app:layout_constraintBottom_toBottomOf="@+id/textView129"
// app:layout_constraintStart_toStartOf="parent"
// app:layout_constraintTop_toTopOf="@+id/textView129"
// app:layout_constraintBottom_toBottomOf="@+id/imageView9"
// app:layout_constraintStart_toEndOf="@+id/imageView9"
// app:layout_constraintTop_toTopOf="@+id/imageView9"
// android:text="@string/luvs"
