import React from 'react';
import ReactDom from 'react-dom';
import Align from 'rc-align';
import { Demo, DemoPanel } from '../../../external/demo/index';
import Doc from './doc.md';
import './demo.scss';

let targetElems = [];

function getTarget(index) {
  if (!targetElems.length) {
    targetElems = document.getElementsByClassName('align-demo-target');
  }

  return targetElems[index - 1];
}

function getTargetFn(index) {
  return () => {
    return getTarget(index);
  };
}

export default function App() {
  return (
    <Demo name="Align" doc={<Doc />}>
      <DemoPanel title="align.point定位">
        <Align
          align={{
            points: ['cc', 'cc'],
          }}
          target={getTargetFn(1)}
        >
          <div className="align-demo-source">cc, cc</div>
        </Align>
        <Align
          align={{
            points: ['tr', 'bl'],
          }}
          target={getTargetFn(1)}
        >
          <div className="align-demo-source">tr, bl</div>
        </Align>
        <Align
          align={{
            points: ['br', 'tl'],
          }}
          target={getTargetFn(1)}
        >
          <div className="align-demo-source">br, tl</div>
        </Align>
        <Align
          align={{
            points: ['bl', 'tr'],
          }}
          target={getTargetFn(1)}
        >
          <div className="align-demo-source">bl, tr</div>
        </Align>
        <Align
          align={{
            points: ['tl', 'br'],
          }}
          target={getTargetFn(1)}
        >
          <div className="align-demo-source">tl, br</div>
        </Align>
        <Align
          align={{
            points: ['bc', 'tc'],
          }}
          target={getTargetFn(1)}
        >
          <div className="align-demo-source">bc, tc</div>
        </Align>
        <Align
          align={{
            points: ['tc', 'bc'],
          }}
          target={getTargetFn(1)}
        >
          <div className="align-demo-source">tc, bc</div>
        </Align>
        <Align
          align={{
            points: ['cr', 'cl'],
          }}
          target={getTargetFn(1)}
        >
          <div className="align-demo-source">cr, cl</div>
        </Align>
        <Align
          align={{
            points: ['cl', 'cr'],
          }}
          target={getTargetFn(1)}
        >
          <div className="align-demo-source">cl, cr</div>
        </Align>
        <div className="align-demo-target">target</div>
      </DemoPanel>
      <DemoPanel title="align.offset偏移">
        <Align
          align={{
            points: ['cc', 'cc'],
            offset: [10, 20],
          }}
          target={getTargetFn(2)}
        >
          <div className="align-demo-source"></div>
        </Align>
        <Align
          align={{
            points: ['cc', 'cc'],
          }}
          target={getTargetFn(2)}
        >
          <div className="align-demo-source align-demo-source--border"></div>
        </Align>
        <span>point: ['cc', 'cc'], offset: [10, 20]</span>
        <div className="align-demo-target">target</div>
      </DemoPanel>
      <DemoPanel title="align.targetOffset偏移">
        <Align
          align={{
            points: ['cc', 'cc'],
            targetOffset: [10, 20],
          }}
          target={getTargetFn(3)}
        >
          <div className="align-demo-source"></div>
        </Align>
        <Align
          align={{
            points: ['cc', 'cc'],
          }}
          target={getTargetFn(3)}
        >
          <div className="align-demo-source align-demo-source--border"></div>
        </Align>
        <span>point: ['cc', 'cc'], targetOffset偏移: [10, 20]</span>
        <div className="align-demo-target">target</div>
      </DemoPanel>
      <DemoPanel title="align.overflow边缘碰撞自适应">
        <Align
          align={{
            points: ['tl', 'br'],
          }}
          target={getTargetFn(4)}
        >
          <div className="align-demo-source align-demo-source--large align-demo-source--border"></div>
        </Align>
        <Align
          align={{
            points: ['tl', 'br'],
            overflow: {
              adjustX: true,
            },
          }}
          target={getTargetFn(4)}
          monitorWindowResize
        >
          <div className="align-demo-source align-demo-source--large"></div>
        </Align>
        <span>尝试改变浏览器窗口大小，使浏览器边缘靠近橙色方块</span>
        <div className="align-demo-target align-demo-target--large">target</div>
      </DemoPanel>
    </Demo>
  );
}

const demo = document.getElementById('demo');

// 会被首页调用，判断下有无节点
if (demo) {
  ReactDom.render(<App />, demo);
}