import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import { curiousBlue, shuttleGray } from "@bufferapp/components/style/color";
import { Link, ClockIcon, Text } from "@bufferapp/components";
import SidebarListItem from "@bufferapp/ui/SidebarListItem";
import { Gear } from "@bufferapp/ui/Icon";
import {
  channelsRedirectUrl,
  SHARED_CHANNELS,
} from "@bufferapp/analyze-account";
import { useAccount } from '@bufferapp/analyze-account';

const Wrapper = styled.span`
  display: flex;
  align-items: center;
  padding: 0.5rem 0.5rem;
  margin: 0 0.5rem;
  border-radius: 4px;
`;

const TextWrapper = styled.span`
  margin-left: 0.5rem;
  margin-right: auto;
  display: inline-flex;
`;

const IconWrapper = styled.span`
  color: ${shuttleGray};
  width: 16px;
  height: 16px;
`;

const hasSharedChannels = (account) =>
  account?.featureFlips?.some((flag) => flag === SHARED_CHANNELS);

const AccountManagementLink = ({
  isGlobalUser,
  isOwner,
  organizationId,
  children,
}) => {
  if (isGlobalUser) {
    return (
      <Link unstyled href={`${channelsRedirectUrl()}`}>
        {children}
      </Link>
    );
  }
  if (isOwner) {
    return (
      <Link
        unstyled
        href={`https://buffer.com/manage/${organizationId}/analyze`}
      >
        {children}
      </Link>
    );
  }
  return <span>{children}</span>;
};

AccountManagementLink.propTypes = {
  isOwner: PropTypes.bool,
  organizationId: PropTypes.string,
  children: PropTypes.node.isRequired,
};

AccountManagementLink.defaultProps = {
  isOwner: false,
  organizationId: null,
};

const AccountManagement = ({
  onTrial,
  daysRemaining,
  organizationId,
  isOwner,
  isGlobalUser,
}) => {
  const account = useAccount();
  return (
    <div>
      {onTrial && (
        <Wrapper>
          <IconWrapper>
            <ClockIcon
              size={{ width: "13px", height: "13px" }}
              color={curiousBlue}
            />
          </IconWrapper>
          <TextWrapper>
            <AccountManagementLink
              isOwner={isOwner}
              isGlobalUser={isGlobalUser}
              organizationId={organizationId}
            >
              <Text size="small" color="curiousBlue">
                Trial ends {daysRemaining}
              </Text>
            </AccountManagementLink>
          </TextWrapper>
        </Wrapper>
      )}
      {isGlobalUser && !hasSharedChannels(account) && (
        <AccountManagementLink
          isGlobalUser={isGlobalUser}
          user={account}
          organizationId={organizationId}
        >
          <SidebarListItem
            id={"manage-accounts"}
            title={"Manage Channels"}
            icon={<Gear />}
            onItemClick={() => {}}
          />
        </AccountManagementLink>
      )}
      {isOwner && (
        <AccountManagementLink
          isOwner={isOwner}
          organizationId={organizationId}
        >
          <SidebarListItem
            id={"settings"}
            title={"Settings"}
            icon={<Gear />}
            onItemClick={() => {}}
          />
        </AccountManagementLink>
      )}
    </div>
  );
};

AccountManagement.propTypes = {
  daysRemaining: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  onTrial: PropTypes.bool,
  isOwner: PropTypes.bool,
  organizationId: PropTypes.string,
};

AccountManagement.defaultProps = {
  daysRemaining: 0,
  onTrial: false,
  isOwner: false,
  organizationId: null,
};

export default AccountManagement;