import styled from '@emotion/styled';
import { useBuilder } from '@tempi/core-editor';
import { Tooltip, TooltipProps } from 'antd';
import { GlobalToken } from 'antd/es/theme/interface';
import React, { Ref, useEffect } from 'react';
import classNames from 'classnames';
export interface SidebarItemProps {
  tooltip?: string;
  tooltipProps?: TooltipProps;
  children: React.ReactNode;
  onClick?: () => void;
  active?: boolean;
  trackingContentName: string;
  trackingTarget?: string;
  disabled?: boolean;
}

export const SidebarItem = React.forwardRef(
  (
    {
      tooltip,
      children,
      onClick,
      active,
      trackingContentName,
      trackingTarget,
      tooltipProps,
      disabled,
      ...rest
    }: SidebarItemProps,
    ref: Ref<HTMLDivElement>,
  ) => {
    const { setShowSettingDialog, getAttrTracking } = useBuilder();

    //hide float setting when open sidebar
    useEffect(() => {
      if (active) setShowSettingDialog(false);
      // eslint-disable-next-line
    }, [active]);

    const renderChildren = () => (
      <Wrapper
        ref={ref}
        {...rest}
        {...getAttrTracking({
          regionName: 'pageEditor',
          contentName: trackingContentName,
        })}
        onClick={disabled ? undefined : onClick}
        disabled={disabled}
      >
        {children}
      </Wrapper>
    );

    return tooltip ? (
      <Tooltip
        placement="right"
        className={classNames({ active })}
        title={tooltip}
        zIndex={980}
        {...tooltipProps}
      >
        {renderChildren()}
      </Tooltip>
    ) : (
      renderChildren()
    );
  },
);

const Wrapper = styled.div<{ theme?: GlobalToken; disabled?: boolean }>(
  ({ theme, disabled }) => `
  width: 40px;
  height: 40px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: ${theme.colorBgBase};
  cursor: pointer;
  transition: 0.2s;
  path[stroke],
  rect[stroke],
  line {
    stroke: ${theme.colorTextSecondary};
  }

  path:not([stroke]),
  rect:not([stroke]) {
    fill: ${disabled ? theme.colorTextDisabled : theme.colorTextSecondary};
  }
  &:hover, &.active {
    background-color: ${
      disabled ? theme.colorBgContainerDisabled : theme.colorPrimaryBgHover
    };
    path[stroke],
      rect[stroke],
      line {
        stroke: ${disabled ? theme.colorTextDisabled : theme.colorPrimary};
      }

      path:not([stroke]),
      rect:not([stroke]) {
        fill: ${disabled ? theme.colorTextDisabled : theme.colorPrimary};
      }
  }

  ${disabled ? 'cursor: not-allowed;' : ''}
`,
);