import React, { memo, useEffect, FC } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Select, Input, Modal, Button, Radio, Checkbox, InputNumber } from 'antd';
import Upload from '../Upload';
import { Store } from 'antd/lib/form/interface';
import { TImageSourceDefaultTypeItem } from '../types';
// import styles from './index.less';
const normFile = (e: any) => {
  if (Array.isArray(e)) {
    return e;
  }
  return e && e.fileList;
};

const { Option } = Select;

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

export type EditorModalProps = {
  visible: boolean;
  onCancel: ((e: React.MouseEvent<HTMLElement, MouseEvent>) => void) | undefined;
  item?: TImageSourceDefaultTypeItem;
  onSave: Function;
  cropRate: number;
  form: any
};

const EditorModal: FC<EditorModalProps> = props => {
  const { item, onSave, visible, onCancel, cropRate, form } = props;
  const {
    getFieldDecorator,
    validateFieldsAndScroll,
    setFieldsValue,
    getFieldsValue,
  } = form

  const onFinish = (values: Store) => {
    console.log(values);
    onSave && onSave(values);
  };
  const handleOk = () => {
    form
      .validateFields()
      .then(values => {
        if (item) {
          values.id = item.id;
          onSave && onSave(values, true);
        }
      })
      .catch(err => {
        console.log(err);
      });
  };
  const handleCancle = (e) => {
    onCancel(e);
  };

  useEffect(() => {
    if (form && item && visible) {
      form.resetFields();
    }
  }, [form, item, visible]);


  const onChange = e => {
    console.log(e);
    return e;
  }
  return (
    <>
      <Modal
        title="编辑数据源"
        visible={visible}
        destroyOnClose={true}
        width={800}
        onOk={handleOk}
        onCancel={handleCancle}
        okText="确定"
        forceRender
        footer={
          <Button type={'primary'} onClick={() => handleOk()}>
            确定
          </Button>
        }
      >
        <Form
          form={form}
          name={`form_editor_modal`}
          {...formItemLayout}
        >
          <Form.Item
            label="标题"

          >
            {getFieldDecorator('title', {
              initialValue: item?.title,
              rules: [
                { required: true, message: '请输入标题!' }
              ]
            })(
              <Input />
            )}
          </Form.Item>
          <Form.Item
            label="资源宽度"

          >
            {getFieldDecorator('width', {
              initialValue: item?.width,
              rules: [
                { required: true, message: '请输入资源宽度!' }
              ]
            })(
              <InputNumber min={0} step={1} precision={0} />
            )}
          </Form.Item>
          <Form.Item
            label="资源高度"

          >
            {getFieldDecorator('height', {
              initialValue: item?.height,
              rules: [
                { required: true, message: '请输入资源高度!' }
              ]
            })(
              <InputNumber min={0} step={1} precision={0} />
            )}
          </Form.Item>
          <Form.Item
            label="顶部距离"

          >
            {getFieldDecorator('top', {
              initialValue: item?.top,
              rules: [
                { required: true, message: '请输入顶部距离!' }
              ]
            })(
              <InputNumber min={0} step={1} precision={0} />
            )}
          </Form.Item>
          <Form.Item
            label="左侧距离"

          >
            {getFieldDecorator('left', {
              initialValue: item?.left,
              rules: [
                { required: true, message: '请输入左侧距离!' }
              ]
            })(
              <InputNumber min={0} step={1} precision={0} />
            )}
          </Form.Item>
          <Form.Item label="资源类型">
            {getFieldDecorator('sourceType', {
              initialValue: item?.sourceType
            })(
              <Checkbox.Group>
                <Checkbox value='image'>
                  图片
                </Checkbox>
                <Checkbox value='text'>
                  文本
                </Checkbox>
                <Checkbox value='hotarea'>
                  热区
                </Checkbox>
              </Checkbox.Group>
            )}
          </Form.Item>
          {item?.sourceType && item.sourceType.length > 0 && <Form.Item label="跳转类型">
            {getFieldDecorator('clickHref', {
              initialValue: item?.clickHref
            })(
              <Checkbox.Group onChange={onChange}>
                <Checkbox value='link'>
                  点击跳转
                </Checkbox>
                <Checkbox value='kefu'>
                  咨询客服
                </Checkbox>
                <Checkbox value='wxapp'>
                  小程序跳转
                </Checkbox>
              </Checkbox.Group>
            )}
          </Form.Item>
          }
          {item?.clickHref && item?.clickHref.includes('link') && <Form.Item label="跳转链接">
            {getFieldDecorator('link', {
              initialValue: item?.link
            })(
              <Input />
            )}
          </Form.Item>}
          {item?.clickHref && item?.clickHref.includes('link') && <Form.Item label="打开方式">
            {getFieldDecorator('openType', {
              initialValue: item?.openType
            })(
              <Select>
                <Option value="currentPage">当前页面</Option>
                <Option value="newPage">新页面</Option>
              </Select>
            )}
          </Form.Item>}
          {item?.clickHref && item?.clickHref.includes('wxapp') && <Form.Item label="小程序跳转链接" extra={<><a target="_blank" style={{ color: 'darkblue' }} href="http://www.liweijia.com/site/special/wxapplink">查看《小程序填写说明》</a></>}>
            {getFieldDecorator('wxapplink', {
              initialValue: item?.wxapplink
            })(
              <Input />
            )}
          </Form.Item>}
          {!!window['currentCates'] && (
            <Form.Item
              label="分类"
            >
              {getFieldDecorator('type', {
                initialValue: item?.type,
                rules: [{ required: true, message: '请选择分类!' }]
              })(
                <Select placeholder="请选择">
                  {window['currentCates'].map((v, i) => {
                    return (
                      <Option value={i} key={i}>
                        {v}
                      </Option>
                    );
                  })}
                </Select>
              )}
            </Form.Item>
          )}

          {item?.sourceType && item?.sourceType.includes('image') && <Form.Item
            label="上传图片"
          >
            {getFieldDecorator('imgUrl', {
              initialValue: item?.imgUrl,
              valuePropName: "fileList",
              getValueFromEvent: normFile,
              rules: [
                { required: true, message: '请上传图片!' }
              ]
            })(
              <Upload cropRate={cropRate} isCrop={false} />
            )}
          </Form.Item>
          }

          {item?.sourceType && item?.sourceType.includes('text') && <Form.Item
            label="文本内容"
          >
            {getFieldDecorator('content', {
              initialValue: item?.content,
              rules: [
                { required: true, message: '请输入文本内容!' }
              ]
            })(
              <Input />
            )}
          </Form.Item>
          }
        </Form>
      </Modal>
    </>
  );
};

export default memo(Form.create({
  onValuesChange: (props, changedValues, allValues) => {
    if (allValues?.sourceType && allValues.sourceType.length > 1) {
      allValues.sourceType = [allValues.sourceType[allValues.sourceType.length - 1]]
    }
    if (allValues?.sourceType && allValues.sourceType.length === 0) {
      allValues.clickHref = []
    }
    if (allValues?.clickHref && allValues.clickHref.length > 0 && allValues.clickHref[allValues.clickHref.length - 1] == 'link') {
      allValues.openType = 'currentPage'
    }

    props?.onSave({
      id: props?.item?.id,
      ...allValues
    });
  }
})(EditorModal));