import React from "react";
import { Linking } from "react-native";
import { LinkText, Wrap } from "./styles";
import { IAlign } from "native/atoms/Typography/TypographyProps";
import { AtomIcon } from "native/atoms/Icon";
import { CSSObject } from "styled-components";
import { convertCustomTheme } from "./index.helper";
import { IColor, ICustomColor, ITypeIcon, ITypeLink } from "./index.interface";

export interface ILinkProps {
  /** URL to redirect */
  url: string;
  /** Type icons (left, right, both) */
  typeIcon: ITypeIcon;
  /** Text link */
  text: string;
  /** Type link (default, section) */
  typeLink?: ITypeLink;
  /** Color text & icons (primary, secondary, custom) */
  color?: IColor;
  /** Custom color (tertiary, quaternary, quinary, senary, dark, light, neutral) */
  customColor?: ICustomColor;
  /** Align text (left, right, center) */
  align?: IAlign;
  /** Name icon left */
  nameIconLeft?: string;
  /** Name icon right */
  nameIconRight?: string;
  /** Disabled flag to link */
  disabled?: boolean;
  /** Styles in format CSSObject */
  styles?: CSSObject;
  /** Function to be executed when press link */
  openLink?: Function;
}
export const AtomLink = ({
  url,
  typeIcon,
  text,
  typeLink = "default",
  color = "primary",
  customColor = "neutral",
  align = "left",
  nameIconLeft = "keyboard_arrow_left",
  nameIconRight = "keyboard_arrow_right",
  disabled = false,
  styles = {},
  openLink,
}: ILinkProps) => {
  const sizeIcons = typeLink === "section" ? 8.33 : 16.67;
  const colorDisabled: any = disabled
    ? "neutral500"
    : color === "custom"
    ? convertCustomTheme(customColor)
    : color === "primary"
    ? "primary"
    : "secondary";

  const pressLink = openLink || (() => Linking.openURL(url));

  return (
    <Wrap
      testID="link"
      onPress={disabled ? undefined : pressLink}
      align={align}
    >
      {(typeIcon === "Left" || typeIcon === "LeftRight") && (
        <AtomIcon
          name={typeLink === "section" ? "keyboard_arrow_left" : nameIconLeft}
          size={sizeIcons}
          color={colorDisabled}
        />
      )}
      <LinkText
        typeLink={typeLink}
        typeIcon={typeIcon}
        color={color}
        customColor={customColor}
        disabled={disabled}
        style={styles}
      >
        {text}
      </LinkText>
      {(typeIcon === "Right" || typeIcon === "LeftRight") && (
        <AtomIcon
          name={typeLink === "section" ? "keyboard_arrow_right" : nameIconRight}
          size={sizeIcons}
          color={colorDisabled}
        />
      )}
    </Wrap>
  );
};
