import { t } from '../../../../i18n';
import React, { useEffect, useState } from 'react';
import {
  DragMoveEvent,
  Translate,
  useDndMonitor,
  useDraggable,
} from '@dnd-kit/core';
import styled from '@emotion/styled';
import { Col, Divider, Row, Space, Typography } from 'antd';
import {
  DismissRegular,
  EmojiRegular,
  ReOrderDotsVerticalRegular,
} from '@fluentui/react-icons';
import { Coordinates, CSS } from '@dnd-kit/utilities';
import { useEditor } from '@tempi/core-editor';
const { Title } = Typography;
interface FloatingWrapperProps {
  nodeId: string;
  title?: string;
  children?: React.ReactNode;
  defaultPosition?: Translate;
  className?: string;
  onClose?: () => void;
  style?: React.CSSProperties;
  contactLink?: string;
}
export const FloatingWrapper: React.FC<FloatingWrapperProps> = ({
  nodeId,
  title,
  children,
  className,
  onClose,
  style,
  contactLink,
}: FloatingWrapperProps) => {
  const { attributes, listeners, setNodeRef, transform } = useDraggable({
    id: nodeId,
  });
  const { enabled } = useEditor((state) => ({
    enabled: state.options.enabled,
  }));
  const initialPosition = {
    // Kích thước của Setting Floating là 360, - 400 để Floating cách lề phải 40px
    x: document.body.clientWidth - 400,
    y: 60,
  };
  const [{ x, y }, setTranslate] = useState<Coordinates>(initialPosition);
  useEffect(() => {
    setTranslate(initialPosition);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [document.body.clientWidth]);
  const onDragEnd = (event: DragMoveEvent) => {
    if (event.active.id === nodeId) {
      setTranslate({
        x: x + event.delta.x,
        y: y + event.delta.y,
      });
    }
  };
  useDndMonitor({
    onDragEnd,
  });
  const customStyle = {
    ...style,
    top: y,
    left: x,
    transform: CSS.Translate.toString(transform),
  };
  if (!enabled) return;
  return (
    <StyledDiv ref={setNodeRef} style={customStyle} className={className}>
      {onClose && (
        <CloseIconWrapper onClick={onClose}>
          <DismissRegular fontSize={20} />
        </CloseIconWrapper>
      )}
      <StyledHandle {...listeners} {...attributes}>
        <Space align="center">
          <ReOrderDotsVerticalRegular fontSize={24} />
          {title && (
            <Title
              style={{ margin: 0 }}
              level={4}
              ellipsis={{ tooltip: title }}
            >
              {t('floatingSetting.title')} {t(title)}
            </Title>
          )}
        </Space>
      </StyledHandle>
      {children}
      <Divider className="m-0 p-half pb-0" />
      <Footer>
        <Col className="mr-half">
          <EmojiRegular fontSize={20} />
        </Col>
        <Col>
          <StyledLink
            href={contactLink || window?.config?.contactLink}
            target="_blank"
          >
            {t('Góp ý tính năng này')}
          </StyledLink>{' '}
          {t('để chúng tôi giúp bạn trải nghiệm tốt hơn')}
        </Col>
      </Footer>
    </StyledDiv>
  );
};
const StyledDiv = styled.div`
  z-index: 1;
  box-shadow: 0 5px 19px rgb(6 21 40 / 10%);
  position: absolute;
  border-radius: 8px;
  overflow: hidden;
  width: 360px;
  background: var(--background-color);
`;
const StyledHandle = styled.div`
  display: flex;
  cursor: move;
  padding: 12px;
`;
const StyledLink = styled.a`
  color: unset;
  text-decoration: underline;

  &:hover {
    color: unset;
    text-decoration: underline;
  }
`;
const CloseIconWrapper = styled.div`
  position: absolute;
  right: 0;
  padding: 16px 12px;
  cursor: pointer;
`;
const Footer = styled(Row)`
  position: relative;
  padding: 8px 12px 16px 12px;
  font-size: 13px;
  flex-wrap: unset;
`;