import React, { FunctionComponent, useEffect, useState } from "react";
import { AtomBody } from "native/atoms/Typography/Body";
import { AtomIcon } from "native/atoms/Icon";
import {
  HtmlContent,
  StyledAccordion,
  StyledContainer,
  StyledHeader,
  StyledHeaderText,
  StyledIcon,
  StyledPanel,
} from "./styles";
import { CSSObject } from "styled-components";
import { ScrollView } from "react-native";
import { ISize } from "native/atoms/Typography/TypographyProps";
import { AtomHeadline } from "native/atoms/Typography/Headline";
import { defaultSystemFonts } from "react-native-render-html";
import { theme } from "data/dataMx";

export interface IAccordionProps {
  data: IItemProps[];
  stylesAccordion?: CSSObject;
  stylesPanel?: CSSObject;
  stylesContainer?: CSSObject;
  stylesHeader?: CSSObject;
  isHtml?: boolean;
  sizeTitle?: ISize;
}

interface IItemProps {
  header: string; // Value to write as header
  detail: string; // Value to write as detail
  _id: any; // Value to use as key
  isHtml?: boolean;
}

export const MoleculeAccordion: FunctionComponent<IAccordionProps> = ({
  data,
  stylesAccordion,
  stylesPanel,
  stylesContainer,
  stylesHeader,
  isHtml = false,
  sizeTitle = "small",
}) => {
  const [array, setArray] = useState(
    data.map((item) => {
      return {
        ...item,
        open: false,
      };
    })
  );

  const systemFonts = [...defaultSystemFonts, "Outfit-Regular"];

  const handlerPress = (row: any) => {
    const newArray = array.map((item) => {
      return {
        ...item,
        open: item._id === row._id ? !item.open : item.open,
      };
    });
    setArray(newArray);
  };

  useEffect(() => {
    setArray(
      data.map((item) => {
        return {
          ...item,
          open: false,
        };
      })
    );
  }, [data]);

  return (
    <StyledAccordion styles={stylesAccordion}>
      {array.map((item: any) => {
        return (
          <StyledPanel key={item._id} testID={`accordion`} styles={stylesPanel}>
            <StyledHeader
              onPress={() => handlerPress(item)}
              testID={`item_${item._id}`}
              styles={stylesHeader}
            >
              <StyledHeaderText>
                <AtomHeadline
                  size={sizeTitle}
                  text={item.header}
                  weight="medium"
                  align="left"
                />
              </StyledHeaderText>
              <StyledIcon>
                <AtomIcon name={item.open ? "remove" : "add"} size={20} />
              </StyledIcon>
            </StyledHeader>
            {item.open && (
              <ScrollView>
                <StyledContainer styles={{ stylesContainer }}>
                  {!isHtml ? (
                    <AtomBody
                      size="xlarge"
                      text={item.detail}
                      align="left"
                      weight="regular"
                    />
                  ) : (
                    <HtmlContent
                      tagsStyles={{
                        p: {
                          fontFamily: "Outfit-Regular",
                          lineHeight: 16,
                          color: `${theme.neutral600}`,
                          fontWeight: "400",
                        },
                      }}
                      systemFonts={systemFonts}
                      source={{
                        html: item.detail,
                      }}
                    />
                  )}
                </StyledContainer>
              </ScrollView>
            )}
          </StyledPanel>
        );
      })}
    </StyledAccordion>
  );
};
