import * as React from "react";
import { get } from "lodash";
import { Link } from "react-router-dom";
import styled from "styled-components";

import { ItemTypes } from "./types";
import { Button, ListItem } from "../";
import { IconSource } from "../Icon/types";
import { EditorMode } from "@sc/modules/v2/Editor/types";

interface LinkProps {
  mode?: EditorMode;
  filter?: any;
  items: any[];
  linkStyle: any;
  showSocial?: boolean;
  style?: any;
}

export const Links: React.FC<LinkProps> = ({
  filter,
  items,
  linkStyle,
  showSocial,
  style,
}) => {
  let links = items;
  if (filter) links = items.filter((itm) => itm.column === filter);

  const LI = styled.li`
    &:hover {
      text-decoration: underline;
    }
  `;

  return (
    <div
      style={{
        display: "table",
        ...style,
        // margin: "0 auto"
        // float: showSocial ? "none" : "right"
      }}
    >
      {links.map((itm) => {
        if (get(itm, "type", ItemTypes.TEXT) === ItemTypes.TEXT) {
          return (
            <Link to={itm.href} style={{ textDecoration: "none" }}>
              <LI style={{ listStyle: "none", ...linkStyle }}>{itm.caption}</LI>
            </Link>
          );
        }

        if (get(itm, "type") === ItemTypes.LISTITEM) {
          return (
            <Link to={itm.href}>
              <ListItem
                style={{
                  listStyle: "none",
                  ...linkStyle,
                  ...get(itm, "style", {}),
                }}
                iconSource={get(itm, "iconSource", IconSource.MATERIAL)}
                iconStyle={get(itm, "iconStyle", {})}
                icon={get(itm, "icon")}
                contentStyle={get(itm, "contentStyle", {})}
              >
                {itm.caption}
              </ListItem>
            </Link>
          );
        }

        if (get(itm, "type") === ItemTypes.BUTTON) {
          return (
            <LI style={{ listStyle: "none", ...linkStyle }}>
              <Button
                caption1={itm.caption}
                {...get(itm, "buttonSettings", {})}
              />
            </LI>
          );
        }
      })}
    </div>
  );
};