import React from 'react';
import '@testing-library/jest-dom/extend-expect';
import { WedaApp } from './setup';

import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';

import { defaultComponents } from './sample/defaultComponents';
import { text, tab } from './sample/base.cals';
import {
  textBinding,
  swiperForBinding,
  ifBinding,
  forBinding,
  classBinding,
  styleBinding,
  dataContainerBinding,
  selectableBlock,
} from './sample/binding.cals';

import { loadDependiences } from './mocks/loaddependiences';
import { lowCodeCals } from './sample/lowcode.cals';

describe('sample 测试', () => {
  it(`基础文本测试`, async () => {
    const { debug, baseElement } = render(
      <WedaApp cals={text} dependencies={defaultComponents} loadDependiences={loadDependiences} />,
    );
    await waitFor(() => screen.getByText('文本测试'));
    expect(screen.queryByText('文本测试')).toBeVisible();
    // debug();
  }, 10000);
  it('基础 tab 事件测试', async () => {
    const { debug, baseElement } = render(
      <WedaApp cals={tab} dependencies={defaultComponents} loadDependiences={loadDependiences} />,
    );
    // debug();
    await waitFor(() => screen.getByText('选项一'));
    screen.getByText('选项一').click();
    expect(screen.queryByText('tab1')).toBeVisible();
    screen.queryByText('选项二').click();
    expect(screen.queryByText('tab2')).toBeVisible();
    expect(screen.queryByText('tab1')).not.toBeInTheDocument();
  }, 10000);
});

describe('数据绑定', () => {
  it('基础属性绑定', async () => {
    const { debug } = render(
      <WedaApp cals={textBinding} dependencies={defaultComponents} loadDependiences={loadDependiences} />,
    );
    await waitFor(() => screen.getByText('绑定的文本数据'));
    // debug();
    expect(screen.queryByText('绑定的文本数据')).toBeVisible();
  });

  it('class属性', async () => {
    const { debug, container } = render(
      <WedaApp cals={classBinding} dependencies={defaultComponents} loadDependiences={loadDependiences} />,
    );
    await waitFor(() => screen.getByText('class属性'));
    // debug();
    expect(container.querySelector('.static.multiStatic')).toBeVisible();
    expect(container.querySelector('.dynamic')).toBeVisible();
    expect(container.querySelector('.withStatic.multiDynamic.withDynamic')).toBeVisible();
  });

  it('style属性', async () => {
    const { debug, container } = render(
      <WedaApp cals={styleBinding} dependencies={defaultComponents} loadDependiences={loadDependiences} />,
    );
    await waitFor(() => screen.getByText('style属性'));
    // debug();

    expect(screen.getByTitle('static').style.background).toEqual('red');
    expect(screen.getByTitle('static commonStyle').style.background).toEqual('red');
    expect(screen.getByTitle('dynamic').style.background).toEqual('red');

    const mix = screen.getByTitle('static with multi dynamic').style;
    expect(mix.background).toEqual('red');
    expect(mix['border-color']).toEqual('red');
    expect(mix.position).toEqual('absolute');

    // expect(container.querySelector('.dynamic')).toBeVisible();
    // expect(
    //   container.querySelector('.withStatic.multiDynamic.withDynamic')
    // ).toBeVisible();
  });

  it('swiper - 循环数据绑定', async () => {
    const { debug, container } = render(
      <WedaApp cals={swiperForBinding} dependencies={defaultComponents} loadDependiences={loadDependiences} />,
    );
    await waitFor(() => screen.getByText('swiper测试'));
    // debug();
    const list = container.querySelectorAll('.g-swiper-item');

    expect(list.length).toEqual(5);
    expect(container.querySelector('.g-swiper-item.current>div>img')).toBeVisible();
    expect(
      screen.queryAllByAltText('https://main.qcloudimg.com/raw/828ee6644f137d166b063ad7f5dda842.png')[0],
    ).toBeVisible();
  });

  it('条件绑定', async () => {
    const { debug } = render(
      <WedaApp cals={ifBinding} dependencies={defaultComponents} loadDependiences={loadDependiences} />,
    );

    await waitFor(() => screen.getByText('基础条件绑定'));
    // debug();
    expect(screen.queryByText('静态显示')).toBeVisible();
    expect(screen.queryByText('静态不显示')).toBeNull();
    expect(screen.queryByText('动态显示')).toBeVisible();
    expect(screen.queryByText('动态不显示')).toBeNull();
  });

  it('嵌套循环数据绑定', async () => {
    const { debug, container } = render(
      <WedaApp cals={forBinding} dependencies={defaultComponents} loadDependiences={loadDependiences} />,
    );
    await waitFor(() => screen.getByText('基础绑定测试'));
    // debug();
    const cards = container.querySelectorAll('div.card-container');
    expect(cards.length).toEqual(2);
    expect(screen.getByText('甜甜圈')).toBeVisible();
    expect(screen.getByText('山今宿')).toBeVisible();
  });
});

describe('lowcode', () => {
  it('base lowcode', async () => {
    const { debug, container } = render(
      <WedaApp cals={lowCodeCals} dependencies={defaultComponents} loadDependiences={loadDependiences} />,
    );
    await waitFor(() => screen.getByText('1'));
    // debug();
    expect(
      Array.from(screen.getByText('1').parentElement.children)
        .map((el) => el.textContent)
        .join(','),
    ).toEqual('1,2,3');

    expect(getComputedStyle(screen.getByText('1'), null).getPropertyValue('background-color')).toEqual('blue');

    expect(screen.queryByText('正序')).toBeVisible();
    expect(screen.queryByText('倒序')).toBeVisible();
    screen.queryByText('倒序').click();

    // debug();
    expect(
      Array.from(screen.getByText('1').parentElement.children)
        .map((el) => el.textContent)
        .join(','),
    ).toEqual('3,2,1');
  });
});

describe('数据容器', () => {
  it('列表容器显示', async () => {
    const { debug, container } = render(
      <WedaApp
        cals={dataContainerBinding}
        dependencies={defaultComponents}
        loadDependiences={loadDependiences}
        context={{
          defaultDataContext: { id56: { data: [{ updatedAt: '1' }] } },
        }}
      />,
    );
    await waitFor(() => screen.getByText('1'));
    const more = container.querySelectorAll('div.weda-list-view__more');
    expect(more.length).toEqual(1);
  });
});

describe('自定义选区', () => {
  it('选区显示,选区触发', async () => {
    const { debug, container } = render(
      <WedaApp cals={selectableBlock} dependencies={defaultComponents} loadDependiences={loadDependiences} />,
    );

    await waitFor(() => screen.getByText('按钮标题'));
    // debug();
    expect(screen.queryByText('新建')).toBeVisible();
    screen.getByText('按钮标题').click();
    expect(screen.queryByText('取消')).toBeVisible();
  });
});
