import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { resetButtonStyles, transitionStyles } from '@os-design/styles';
import { clr } from '@os-design/theming';
import { omitEmotionProps } from '@os-design/utils';
import React from 'react';

type JsxButtonProps = React.JSX.IntrinsicElements['button'];
interface ToolbarButtonProps extends JsxButtonProps {
  active?: boolean;
}

const activeStyles = (p) =>
  p.active &&
  css`
    background-color: ${clr(p.theme.editorToolbarButtonColorBgActive)};
  `;

type StyledToolbarButtonProps = Pick<ToolbarButtonProps, 'active'>;
const StyledToolbarButton = styled(
  'button',
  omitEmotionProps('active')
)<StyledToolbarButtonProps>`
  ${resetButtonStyles};
  cursor: pointer;
  font-size: 1.3em;

  display: flex;
  justify-content: center;
  align-items: center;

  width: ${(p) => p.theme.editorToolbarButtonSize}em;
  height: ${(p) => p.theme.editorToolbarButtonSize}em;
  background-color: ${(p) => clr(p.theme.editorToolbarButtonColorBg)};
  color: ${(p) => clr(p.theme.editorToolbarButtonColorText)};

  @media (hover: hover) {
    &:hover,
    &:focus-visible {
      background-color: ${(p) => clr(p.theme.editorToolbarButtonColorBgHover)};
    }
  }

  ${activeStyles};
  ${transitionStyles('background-color')};
`;

const ToolbarButton: React.FC<ToolbarButtonProps> = (props) => (
  <StyledToolbarButton {...props} />
);

ToolbarButton.displayName = 'ToolbarButton';

export default ToolbarButton;