import { MyPageContainer } from '@/common';
import { MyResponseType } from '@/common/typings';
import { ProCard, ProFormColumnsType } from '@ant-design/pro-components';
import { Fields, HierarchyType, Meta, RawData } from '@antv/s2';
import { Flex, Space } from 'antd';
import { useEffect } from 'react';
import { useSetState } from 'react-use';
import { MyS2TableComponent } from './MyS2TableComponent';
import { MyS2TableExtra } from './MyS2TableExtra';
import { MySwitcherFields } from './MySwitcherFields';
import Query from './Query';

export type PropsType = {
  title: string;
  api: (values?: any) => Promise<MyResponseType>;
  defaultParams?: Record<string, any>;
  columns?: ProFormColumnsType<Record<string, any>, 'text'>[] | undefined;
};

export type DataType = {
  config: {
    hierarchyType: HierarchyType | undefined;
    rowGrandTotals: boolean;
    rowSubTotals: boolean;
    colGrandTotals: boolean;
    colSubTotals: boolean;
  };
  data: RawData[];
  fields: Fields;
  meta?: Meta[];
  query?: Record<string, any>;
};

export function NewMyS2Table(props: PropsType) {
  const [data, setData] = useSetState<DataType>(undefined);

  // 请求数据
  function doRequest() {
    props
      .api?.({ ...props.defaultParams, ...data.query, fields: data.fields })
      .then((resp) => {
        if (!data.config)
          setData({
            config: resp.data.config,
            data: resp.data.data,
            fields: resp.data.fields,
            meta: resp.data.meta,
          });
        else setData({ data: resp.data.data });
      });
  }

  // // 如果没有columns，直接发起请求
  // useEffect(() => {
  //   if (props.columns === undefined) doRequest({});
  // }, []);

  useEffect(() => {
    console.log('useEffect query', data.query, data.fields);
    if (!data.query && !data.fields) {
      if (props.columns === undefined) {
        doRequest();
      }
    } else {
      doRequest();
    }
  }, [data.query, data.fields]);

  return (
    <MyPageContainer title={props.title}>
      {props.columns && (
        <Query
          columns={props.columns}
          doRequest={(values) => {
            setData({ query: values });
          }}
        />
      )}
      <ProCard>
        <Space direction="vertical" style={{ width: '100%' }}>
          <Flex
            justify="space-between"
            style={{ width: '100%', margin: '10px 0' }}
          >
            {data.fields && (
              <MySwitcherFields
                fields={data.fields}
                setFields={(fields: DataType['fields']) => {
                  console.log('fields', fields);
                  setData({ fields });
                }}
              />
            )}
            {data.config && (
              <MyS2TableExtra
                config={data.config}
                setConfig={(config) => {
                  setData({ config });
                }}
                data={data.data}
              />
            )}
          </Flex>
          {data.config && (
            <MyS2TableComponent
              config={data.config}
              fields={data.fields}
              meta={data.meta}
              data={data.data}
            />
          )}
        </Space>
      </ProCard>
    </MyPageContainer>
  );
}