import {
  COLORS,
  Dropdown,
  Flex,
  Hide,
  IconArrowUpRightMini,
  IconEditMini,
  IconTrashMini,
  Item,
  Show,
  SubtleButton,
  SubtleButtonLink
} from "@heydovetail/ui-components";
import React from "react";
import { styled } from "typestyle-react";

interface Props {
  editable: boolean;
  onEditClick: () => void;
  onRemoveClick: () => void;
  url: string;
}

export class LinkEditorPanel extends React.PureComponent<Props> {
  public render() {
    const { editable, onEditClick, onRemoveClick, url } = this.props;
    const location = { internal: false as false, url, openInNewTab: true };

    return (
      <Panel>
        <Dropdown>
          <Inner>
            <Flex styled={{ justifyContent: "center" }}>
              <Hide device="phone">
                <Item style={{ flexGrow: 0, minWidth: 0 }}>
                  <Url>
                    <SubtleButtonLink location={location}>{url}</SubtleButtonLink>
                  </Url>
                </Item>
              </Hide>
              <Show device="phone">
                <Item style={{ flexGrow: 0 }}>
                  <SubtleButtonLink location={location} disabled={!editable}>
                    <IconArrowUpRightMini />
                  </SubtleButtonLink>
                </Item>
              </Show>
              <Item style={{ flexGrow: 0 }}>
                <SubtleButton onClick={onEditClick} disabled={!editable}>
                  <IconEditMini />
                </SubtleButton>
              </Item>
              <Item style={{ flexGrow: 0 }}>
                <SubtleButton onClick={onRemoveClick} disabled={!editable}>
                  <IconTrashMini />
                </SubtleButton>
              </Item>
            </Flex>
          </Inner>
        </Dropdown>
      </Panel>
    );
  }
}

const Panel = styled("div", {
  color: COLORS.i60,
  maxWidth: "320px"
});

const Inner = styled("div", {
  padding: "0 8px"
});

const Url = styled("div", {
  color: COLORS.purple,
  fontWeight: 500
});