import * as _ from "lodash";
import * as React from "react";

import { Sprite, SpriteType } from "../Sprite";
import { ClientPlatform } from "../Share";

import { openLink } from "../../utilities/dom";

interface IContact {
  client: ClientPlatform;
  link: (() => void) | string;
  text?: string;
}

export interface IContactsProps {
  contacts: IContact[];
}

export const Contacts = ({ contacts }: IContactsProps) => (
  <div className="contacts">
    {contacts.map(({ client, link, text }) => (
      <div
        key={client}
        className="contacts__contact-container"
        onClick={() => {
          if (_.isFunction(link)) {
            link()
          } else {
            openLink(link, true)
          }
        }}
      >
        <div className="contacts__contact">
          <div className="contacts__contact-icon">
            <Sprite type={(() => {
              switch (client) {
                case ClientPlatform.Sms:
                  return SpriteType.Pencil;
                case ClientPlatform.Phone:
                  return SpriteType.Phone;
                case ClientPlatform.Email:
                default:
                  return SpriteType.Email;
              }
            })()} />
          </div>

          <div className="contacts__contact-name">
            {client}
          </div>

          {text && (
            <div className="contacts__contact-text">
              {text}
            </div>
          )}
        </div>
      </div>
    ))}
  </div>
);