import React, { memo, RefObject, useEffect } from 'react';
// import { Form } from '@ant-design/compatible';
// import '@ant-design/compatible/assets/index.css';
import { Select, InputNumber, Input, Radio, Form } from 'antd';
import Color from '../../../../core/FormComponents/Color';
import Upload from '../../../../core/FormComponents/Upload';
import styled from 'styled-components';
import _ from 'lodash';
import { ActionCreators, StateWithHistory } from 'redux-undo';
import { connect } from 'dva';
import UploadFormITem from '../../../../core/FormComponents/UploadFormITem';
import ImageList1 from 'editorCore/FormComponents/ImageList1';
const RadioGroup = Radio.Group;
const { TextArea } = Input;

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};

const PageForm = (props: any) => {
  const [form] = Form.useForm();
  const { isNewPage, config, defaultValue, onSave, uid, rightPannelRef } = props;

  console.log(123, { form }, form?.getFieldValue?.('template'), defaultValue);
  const scanQRcodeQRcode = form?.getFieldValue?.('template')
    ? form?.getFieldValue?.('template') === 'standard'
    : defaultValue.template === 'standard';
  return (
    <Box>
      <Form
        form={form}
        onValuesChange={(changedValues, allValues) => {
          if (_.has(changedValues, 'template')) {
            if (changedValues?.template === 'simple') {
              props.dispatch({
                type: 'editorModal/delCateNav',
                payload: {scanQRcode: allValues.scanQRcode},
              });
            }
            if (changedValues?.template === 'standard') {
              props.dispatch({
                type: 'editorModal/addCateNav',
                payload: {scanQRcode: allValues.scanQRcode},
              });
            }
          }
          if (_.has(changedValues, 'scanQRcode')) {
            if (allValues?.template === 'standard') {
              props.dispatch({
                type: 'editorModal/addCateNav',
                payload: {scanQRcode: changedValues.scanQRcode},
              });
            }
          }
          props?.onSave(allValues);
        }}
        name={`form_pageConfig`}
        {...formItemLayout}
      >
        {isNewPage && (
          <Form.Item initialValue={defaultValue?.title} label="标题" name="title">
            <Input />
          </Form.Item>
        )}
        <Form.Item
          label="模板"
          name="template"
          initialValue={_.defaultTo(defaultValue?.template, 'simple')}
        >
          <RadioGroup>
            <Radio value={'simple'}>简约</Radio>
            <Radio value={'standard'}>标准</Radio>
          </RadioGroup>
        </Form.Item>
        <Form.Item
          label="扫一扫"
          name="scanQRcode"
          hidden={!scanQRcodeQRcode}
          initialValue={_.defaultTo(defaultValue?.scanQRcode, 1)}
        >
          <RadioGroup>
            <Radio value={1}>启用</Radio>
            <Radio value={0}>禁用</Radio>
          </RadioGroup>
        </Form.Item>

        {/* <Form.Item
          label="在线咨询"
          name="online_consult"
          initialValue={defaultValue?.online_consult}
          rules={[
            {
              required: true,
              message: '请选择在线咨询',
            },
          ]}
        >
          <RadioGroup>
            <Radio value={1}>启用</Radio>
            <Radio value={0}>禁用</Radio>
          </RadioGroup>
        </Form.Item> */}
        <Form.Item
          label="状态"
          name="sub_status"
          initialValue={defaultValue?.sub_status}
          rules={[
            {
              required: true,
              message: '请选择状态',
            },
          ]}
        >
          <RadioGroup>
            <Radio value={1}>启用</Radio>
            <Radio value={0}>禁用</Radio>
          </RadioGroup>
        </Form.Item>
        {isNewPage && (
          <Form.Item label="背景色" name="bgColor" initialValue={defaultValue?.bgColor}>
            <Color />
          </Form.Item>
        )}
        {isNewPage && (
          <Form.Item label="背景图片" name="bgImg" initialValue={defaultValue?.bgImg}>
            <UploadFormITem isCrop={false} />
          </Form.Item>
        )}
        {isNewPage && (
          <Form.Item
            label="弹窗图片"
            name="modalAdsBgImg"
            initialValue={defaultValue?.modalAdsBgImg}
          >
            <ImageList1 cropRate={0}/>
          </Form.Item>
        )}
        {isNewPage && (
          <Form.Item
            label="弹窗背景色"
            name="modalAdsBgColor"
            initialValue={defaultValue?.modalAdsBgColor}
          >
            <Color />
          </Form.Item>
        )}
        {isNewPage && (
          <Form.Item
            label="弹窗圆角"
            name="modalAdsBgRadius"
            initialValue={_.defaultTo(defaultValue?.modalAdsBgRadius, 0)}
          >
            <InputNumber />
          </Form.Item>
        )}
        {isNewPage && (
          <Form.Item
            label="弹窗停留时间"
            name="modalAdsBgTime"
            initialValue={_.defaultTo(defaultValue?.modalAdsBgTime, 3)}
          >
            <InputNumber />
          </Form.Item>
        )}
        {/* <div style={{ textAlign: 'center', width: 300 }}>
        <Button type="primary" onClick={() => savePage()}>保存</Button>
      </div> */}
      </Form>
    </Box>
  );
};

const Box = styled.div`
  height: 400px;
  width: 400px;
  overflow-y: scroll;
`;

// export default memo(PageForm);

export default connect((state: StateWithHistory<any>) => {
  return {  };
})(PageForm);