import React, { ReactNode, useMemo, useState } from 'react';
import { expandObj } from 'src/types';
import OPDialog from '../op-dialog';
import './index.scss';

const openIcon =
  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAFvElEQVR4Ae3Bv08cZxoH8O/zvLMzs7MLxBv/AskScWSloIgvEUqTk5wUV0RyaZ+44qoo0sm6IgW0ftPiQ5FycopUqUAyxRX+A7DO0TUJZ1FQWJHikyKBwy8b2NmdmZ15n2yxiTYcYGDfArLv50OwQETojc8QcPOHwK8HXuplniFmkzPhFGLPCIsxQe7nWTXNTflq+uwuUiIS9IhwQloLP8RqmGwXYV3CwORNwhnGXlmqlKThkEpuYjjRmgxOgHBMWmuea9ypJFlcNTkTfofYMxL6lfpEdD/WWhscA+GIRITenvwp2mk0BwpWjD6gTGEGo/Lu0r1LDSISHAHhCG49EPXk8fNaKq0S+lBApdYf/nh5a/42FXgFwiuM6WU/XotqBStGH1OmMJWLja1lPZbhEIRDvPvJSrTm56/B+dXFzHu5+NVIAwdQOMC7n6xEa37+GpzfiJUJr12fLFYXZ1rYh8I+xvSyv5WWanD2FSsTXvno43T90ZcF9mDsceuBqHgtqsE5VLwW1W49EIU9GF1EhJ48fl4rWDGcQxWs+Mnj5zURIXRR6PKv+G+Vet6K4BxJAaO+XkjMT//5RwsdjA6tNe80mgNwjmWn0RzQWjM6GB1zjTuVghXDOZaCFc817lTQwWjTWjjJ4iqcE0myuKq1MNoYbQ+xGpqcCc6JmJzpIVZDtDHaku0ihNOTZLsI0cYiQnUJAzg9qUsYiAjRqJaw2PixhlPu9WrwAfkyDZER9IRikDwtCsy92G7NwiJ1/sqWqr3314ppKR+nXKWq5iEygt75AIaZ8KdyqN4Twr/zXGJY4NGmYb8eeOhTRHi/Eqh/whK/HnicepmHM0AymgLRCiwjwvvnhkp/gQWpl3meIWacAZv1dAHAOHpUCbzhIKJpBj5Eh1KYADCLHhliZpMzoY/Eab6aNmQK3YTeggUmZ2L0oTjNV/EbUoElDMcqhmMVw7GK4VjFcKxiOFYxHKsYjlUMxyqGYxXDsYrhWMVwrGI4VjEcqxj9imgFvyBagSWMPiUZTYFoBUQrktEULPFgyevV4APyZRptktHUZj1dwCm2WU8XAIzDMoYl5Ms0REYgMkK+TKNPMWwRGcEvREbQpxiOVQzHKoZjFcOxiuFYxXCsYjhWMRyrGI5VDMcqhmMVw7GK4VjFcKxiOFYxrKEYXSqBN4w+xOwZgQ0kT9EliGi6EnjD6CPsGfFYjDFghR4VBeYU4x10MPBhOaLvylEJPSFakYymNuvpAk45FmM4yP0cFrzYbs2K4BvYJjJCvkzjDAhyP+esmuawJE6Lv4vgG/SprJrmbMpXU1iSNM3a5svWnwuDSRD+C1CMXhGtSEZTOANM+WrqPbuLdPTTspi8SbDkxXZrFsAs+gh7ZXl2FymhbezTH2s7LQnhnNhgiZLlz69sMdrCIZXA6Uk4pBK0MdpuYjhhzwicE2HPyE0MJ2gjdLw1tT7QaDQH4BxbFJV3n05f2EUbo2Miuh8rUxg4x6JMYSai+zE6GB1aazMYlXfhHMtgVN7VWht0MLos3bvUCKjUgnMkAZVaS/cuNdCFsMetB6K+ffS/CwUrhnMgZQozfmN0ff42FehC2MeYXvZ3NgbOwznQ4PndjWU9lmEPhX2sP/qyuHZ9soiVCeH8n4uZ93Jp5s0E+1A4wOriTOva9ckiViaE86uLmfdy8auRBg6gcIjVxZnWlY8+TvO6FwoxoY8pU5iBC/Hm0sybCQ7BeIVlPZaN3xhdD6jUQp8KqNQavzG6vqzHMrwC4wjmb1Px/ReXN86F/rYyhUGfUKYw50J/+/svLm/M36YCR0A4Jq01zzXuVJIsrpqcCb9D7BkJ/Up9Irofa60NjoFwQloLP8RqmGwXYV3CwORNwhnGXlmqlKThkEpuYjjRmgxOgGCBiNAbnyHg5g+BXw+81Ms8Q8wmZ8IpxJ4RFmOC3M+zapqb8tX02V2kRCTo0c8JPlQ7TXYEQgAAAABJRU5ErkJggg==';
const closeIcon =
  'data:image/png;base64,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';

interface OPBoxI {
  width?: number | string;
  height?: number | string;
  children: ReactNode;
  offset: number[];
  dialogProps: expandObj;
  dialogContent: ReactNode;
}

export default function OPBox(props: OPBoxI) {
  const {
    width = '100%',
    height = '100%',
    children,
    offset = [10, -10],
    dialogProps = {},
    dialogContent,
  } = props;

  const [showDailog, setShowDailog] = useState(false);

  const rectOffset = useMemo(() => {
    const verNumber = (offset || [])[0];
    const hozNumber = (offset || [])[1];
    const verKey = verNumber < 0 ? 'bottom' : 'top';
    const hozKey = hozNumber < 0 ? 'right' : 'left';
    return {
      [verKey]: Math.abs(verNumber),
      [hozKey]: Math.abs(hozNumber),
    };
  }, [offset]);

  return (
    <>
      <div className='op-box' style={{ width, height }} data-hottag='cn-op.box'>
        <img
          onClick={() => {
            setShowDailog(true);
          }}
          className='op-box-icon'
          src={openIcon}
          style={{ ...rectOffset }}
          alt=''
        />
        {children}
      </div>
      <OPDialog
        visible={showDailog}
        footer={false}
        width='90%'
        {...dialogProps}
      >
        <div>
          <img
            onClick={() => {
              setShowDailog(false);
            }}
            className='op-box-icon'
            src={closeIcon}
            style={{ ...rectOffset }}
            alt=''
          />
          {dialogContent || children}
        </div>
      </OPDialog>
    </>
  );
}