import Constants from '@/constants';
import { getPbcBusinessListUsingPost } from '@/services/pop-b2b2c/pbcBusinessController';
import { listAdminTreeUsingGet } from '@/services/pop-b2b2c/pbcCategoryController';
import { getRecordByL3CategoryIdUsingGet } from '@/services/pop-b2b2c/pbcCommonDataController';
import { addOrUpdateProductForAdminUsingPost } from '@/services/pop-b2b2c/pbcProductController';
import { getCities } from '@/utils/cities';
import {
  ProCard,
  ProForm,
  ProFormCascader,
  ProFormDigit,
  ProFormInstance,
  ProFormList,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProFormUploadButton,
} from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout';
import { DndContext, DragEndEvent, PointerSensor, useSensor } from '@dnd-kit/core';
import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { Button, Col, message, Row } from 'antd';
import Upload, { RcFile, UploadFile } from 'antd/es/upload';
import React, { useRef, useState } from 'react';
import { CSS } from '@dnd-kit/utilities';

interface DraggableUploadListItemProps {
  originNode: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
  file: UploadFile<any>;
}

const DraggableUploadListItem = ({ originNode, file }: DraggableUploadListItemProps) => {
  let { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id: file.uid,
  });

  const style: React.CSSProperties = {
    transform: CSS.Translate.toString(transform),
    transition,
    cursor: 'move',
  };

  return (
    <div
      ref={setNodeRef}
      style={style}
      // prevent preview event when drag end
      className={isDragging ? 'is-dragging' : ''}
      {...attributes}
      {...listeners}
    >
      {/* hide error tooltip when dragging */}
      {file.status === 'error' && isDragging ? originNode.props.children : originNode}
    </div>
  );
};

const Detail: React.FC<any> = () => {
  const [cities] = useState(() => getCities())

  const [colorData, setColorData] = useState<API.PbcCommonData[]>()
  const [commonDataList, setCommonDataList] = useState<API.PbcCommonData[]>()

  const formRef = useRef<ProFormInstance>();

  const onSave = () => {
    formRef.current?.submit()
    const values = formRef.current?.getFieldsValue()
    console.log(values.colorItems)
    console.log(values.specItems)
  }

  const handleCategoryChange = (value: any[], items: API.PbcCategory[]) => {
    const [c1, c2, c3] = items
    formRef.current?.setFieldsValue({
      pbcProductTopCategoryName: c1?.pbcCategoryName,
      pbcProductParentCategoryName: c2?.pbcCategoryName,
      pbcProductCategoryName: c3?.pbcCategoryName,
    })
    if (value.length === 3) {
      getRecordByL3CategoryIdUsingGet({ l3CategoryId: value[2] }).then(res => {
        if (res.retcode && res.data) {
          setColorData(res.data.colorData)
          setCommonDataList(res.data.commonDataList)
        }
      })
    }
  }

  const onSubmit = async (values: any) => {
    let pbcProductOriginalProvince = undefined, pbcProductOriginalCity = undefined;
    if (values?.pbcZone?.length) {
      ([pbcProductOriginalProvince, pbcProductOriginalCity] = values.pbcZone);
    }
    const [pbcProductTopCategoryId, pbcProductParentCategoryId, pbcProductCategoryId] = values.pbcProductCategoryIdList
    console.log(values.colorItems)
    console.log(values.specItems)
    const specItems: API.PbcProductCommonData[] = []
    if (colorData && values.colorItems && values.colorItems.length > 0) {
      for (let i = 0; i < values.colorItems.length; i++) {
        const element = values.colorItems[i];
        specItems.push({
          pbcCommonDataId: colorData.length > 0 ? colorData[0].pbcId : undefined,
          pbcSystemName: '颜色',
          pbcSystemInputType: 'text',
          pbcCommonDataSystem: element.name,
          pbcColorImageUrl: element.value.length > 0 ? element.value[0].response.data : ''
        })
      }
    }
    if (commonDataList) {
      for (let i = 0; i < commonDataList.length; i++) {
        const element = commonDataList[i];
        console.log(values[`value${i}`])
        let name = ''
        if (element.pbcSystemInputType === 'select' && element.commonDataValueList) {
          name = element.commonDataValueList.find(e => e.pbcId === values[`value${i}`])?.pbcSystemValue || ''
        }
        specItems.push({
          pbcCommonDataId: element.pbcId,
          pbcSystemName: element.pbcSystemName,
          pbcSystemInputType: element.pbcSystemInputType,
          pbcCommonDataValueId: element.pbcSystemInputType === 'select' ? values[`value${i}`] : undefined,
          pbcCommonDataSystemValue: element.pbcSystemInputType === 'select' ? name : undefined,
          pbcCommonDataSystem: element.pbcSystemInputType === 'select' ? undefined : values[`value${i}`]
        })
      }
    }
    const params: API.PbcProductDTO = {
      ...values,
      pbcProductOriginalProvince,
      pbcProductOriginalCity,
      pbcProductTopCategoryId,
      pbcProductParentCategoryId,
      pbcProductCategoryId,
      productCommonDataList: specItems,
      pbcProductImages: values.pbcProductImages.filter((e: any) => e.response && e.response.data).map((e: any) => e.response.data).join(','),
      pbcProductDetailImages: values.pbcProductDetailImages.filter((e: any) => e.response && e.response.data).map((e: any) => e.response.data).join(','),
      pbcZone: undefined,
      colorItems: undefined,
      specItems: undefined,
      pbcProductCategoryIdList: undefined,
    }
    const msg = await addOrUpdateProductForAdminUsingPost(params)
    if (msg.retcode) {
      message.success("创建成功！")
      history.back();
      return true
    } else {
      message.error(msg.retmsg)
      return false
    }
  }

  const sensor = useSensor(PointerSensor, {
    activationConstraint: { distance: 10 },
  });

  const onDragEnd = ({ active, over }: DragEndEvent, fieldName: string) => {
    if (active.id !== over?.id) {
      const arr = formRef.current?.getFieldValue(fieldName) || []
      const activeIndex = arr.findIndex((i: any) => i.uid === active.id);
      const overIndex = arr.findIndex((i: any) => i.uid === over?.id);
      const newArr = arrayMove(arr, activeIndex, overIndex)
      formRef.current?.setFieldValue(fieldName, newArr)
    }
  };

  return (
    <PageContainer
      header={{
        title: '',
      }}
      footer={[
        <Button
          key="back"
          onClick={() => {
            history.back();
          }}
        >
          返回
        </Button>,
        <Button type="primary" key="submit" onClick={onSave}>
          保存
        </Button>
      ]}
    >
      <ProForm layout="horizontal" labelAlign="left" requiredMark={false} formRef={formRef} onFinish={onSubmit} submitter={false}>
        <ProFormText name="pbcProductTopCategoryName" hidden />
        <ProFormText name="pbcProductParentCategoryName" hidden />
        <ProFormText name="pbcProductCategoryName" hidden />
        <ProCard title="基本信息" style={{ marginBottom: 12 }}>
          <Row gutter={20}>
            <Col span={8}>
              <ProFormSelect
                label="所属商户"
                name="pbcBusinessId"
                rules={[
                  { required: true, message: '请选择所属商户' }
                ]}
                request={ async () => {
                  const msg = await getPbcBusinessListUsingPost();
                  if (msg.retcode && msg.data) {
                    return msg.data;
                  }
                  return [];
                }}
                fieldProps={{ 
                  showSearch: true,
                  fieldNames: { label: 'pbcBusinessName', value: 'pbcId' }
                }}
              />
            </Col>
            <Col span={8}>
              <ProFormText label="编号" name="pbcProductCode" rules={[
                { required: true, message: '请输入商品编号' },
              ]} />
            </Col>
            <Col span={8}>
              <ProFormText label="名称" name="pbcProductTitle" rules={[
                { required: true, message: '请输入商品名称' },
              ]} />
            </Col>
          </Row>
          <Row gutter={20}>
            <Col span={8}>
              <ProFormCascader label="产地" name="pbcZone" fieldProps={{ options: cities }} />
            </Col>
            <Col span={8}>
              <ProFormText label="价格" name="pbcProductPrice" rules={[
                { required: true, message: '请输入商品价格' },
              ]} fieldProps={{ prefix: '￥' }} />
            </Col>
            <Col span={8}>
              <ProFormDigit label="库存" name="pbcProductStock" min={0} fieldProps={{ precision: 0 }} rules={[
                { required: true, message: '请输入商品库存' },
              ]} />
            </Col>
          </Row>
          <Row gutter={20}>
            <Col span={8}>
              <ProFormText label="货架号" name="pbcProductShelfNumber" rules={[
                { required: true, message: '请输入货架号' }
              ]} />
            </Col>
            <Col span={8}>
              <ProFormCascader label="类目" name="pbcProductCategoryIdList"
                request={ async () => {
                  const msg = await listAdminTreeUsingGet({ type: 2 });
                  if (msg.retcode && msg.data) {
                    return msg.data;
                  }
                  return [];
                }}
                fieldProps={{fieldNames: { label: 'pbcCategoryName', value: 'pbcId', children: 'children' }, onChange: handleCategoryChange}}
                rules={[
                  { required: true, message: '请选择类目' },
                ]} />
            </Col>
          </Row>
          {colorData ? <ProForm.Item isListField style={{ marginBlockEnd: 0 }} label="颜色" required>
            <ProFormList
              name="colorItems"
              creatorButtonProps={{
                creatorButtonText: '新增',
                icon: false,
                type: 'link',
                style: { width: 'unset' },
              }}
              copyIconProps={false}
              deleteIconProps={{ tooltipText: '删除' }}
              itemRender={({ listDom, action }) => (
                <div
                  style={{
                    display: 'inline-flex',
                    marginInlineEnd: 25,
                  }}
                >
                  {listDom}
                  {action}
                </div>
              )}
            >
              <Row align="middle" gutter={20}>
                <Col span={12}>
                  <ProFormText width="sm" name={['name']} placeholder="请输入颜色名" rules={[
                    { required: true, message: '请输入颜色名' }
                  ]} />
                </Col>
                <Col span={12}>
                  <ProFormUploadButton
                    name={['value']}
                    fieldProps={{
                      name: 'file',
                      accept: 'image/*',
                      headers: {
                        authorization: localStorage.getItem('token') ?? '',
                      },
                      action: process.env.BASE_URL + '/oss/imgUpload',
                      beforeUpload(file: RcFile) {
                        const isLt2M = file.size / 1024 / 1024 < 10;
                        if (!isLt2M) {
                          message.error('图片大小不能超过10MB!');
                        }
                        return isLt2M || Upload.LIST_IGNORE;
                      },
                      onPreview: async (file) => {
                        
                        if (file.uid === '-1') {
                          window.open(file.url);
                        }
                        if (file.response && file.response.retcode) {
                          window.open(file.response.data);
                        }
                      },
                      listType: 'picture-card',
                    }}
                    rules={[
                      { required: true, message: '请上传颜色图片' },
                    ]}
                    max={1}
                  />
                </Col>
              </Row>
            </ProFormList>
          </ProForm.Item> : null}
          <Row gutter={20}>
            <Col span={24}>
              <DndContext sensors={[sensor]} onDragEnd={(event) => onDragEnd(event, "pbcProductImages")}>
                <SortableContext items={formRef.current?.getFieldValue("pbcProductImages") ? formRef.current?.getFieldValue("pbcProductImages").map((i: any) => i.uid) : []} strategy={verticalListSortingStrategy}>
                  <ProFormUploadButton
                    label="相册图"
                    name="pbcProductImages"
                    fieldProps={{
                      name: 'file',
                      accept: 'image/*',
                      multiple: true,
                      headers: {
                        authorization: localStorage.getItem('token') ?? '',
                      },
                      itemRender: (originNode, file) => <DraggableUploadListItem originNode={originNode} file={file} />,
                      action: process.env.BASE_URL + '/oss/imgUpload',
                      beforeUpload(file: RcFile) {
                        const isLt2M = file.size / 1024 / 1024 < 10;
                        if (!isLt2M) {
                          message.error('图片大小不能超过10MB!');
                        }
                        return isLt2M || Upload.LIST_IGNORE;
                      },
                      onPreview: async (file) => {
                        
                        if (file.uid === '-1') {
                          window.open(file.url);
                        }
                        if (file.response && file.response.retcode) {
                          window.open(file.response.data);
                        }
                      },
                      listType: 'picture-card',
                    }}
                    rules={[
                      { required: true, message: '请上传相册图' },
                    ]}
                  />
                </SortableContext>
              </DndContext>
            </Col>
          </Row>
          <Row gutter={20}>
            <Col span={24}>
              <DndContext sensors={[sensor]} onDragEnd={(event) => onDragEnd(event, "pbcProductDetailImages")}>
                <SortableContext items={formRef.current?.getFieldValue("pbcProductDetailImages") ? formRef.current?.getFieldValue("pbcProductDetailImages").map((i: any) => i.uid) : []} strategy={verticalListSortingStrategy}>
                  <ProFormUploadButton
                    label="详情图"
                    name="pbcProductDetailImages"
                    fieldProps={{
                      name: 'file',
                      accept: 'image/*',
                      multiple: true,
                      headers: {
                        authorization: localStorage.getItem('token') ?? '',
                      },
                      itemRender: (originNode, file) => <DraggableUploadListItem originNode={originNode} file={file} />,
                      action: process.env.BASE_URL + '/oss/imgUpload',
                      beforeUpload(file: RcFile) {
                        const isLt2M = file.size / 1024 / 1024 < 10;
                        if (!isLt2M) {
                          message.error('图片大小不能超过10MB!');
                        }
                        return isLt2M || Upload.LIST_IGNORE;
                      },
                      onPreview: async (file) => {
                        
                        if (file.uid === '-1') {
                          window.open(file.url);
                        }
                        if (file.response && file.response.retcode) {
                          window.open(file.response.data);
                        }
                      },
                      listType: 'picture-card',
                    }}
                    rules={[
                      { required: true, message: '请上传详情图' },
                    ]}
                  />
                </SortableContext>
              </DndContext>
            </Col>
          </Row>
          {commonDataList ? commonDataList.map((e, index) => <Row key={e.pbcId} align="middle" gutter={20}>
            <Col span={6}>
              <ProFormText width="sm" disabled name={`name${index}`} initialValue={e.pbcSystemName} placeholder="请输入规格名称" rules={[
                { required: true, message: '请输入规格名称' }
              ]} />
            </Col>
            <Col span={6}>
            {e.pbcSystemInputType === 'select' ? <ProFormSelect name={`value${index}`} options={e.commonDataValueList?.map(item => {
              return {
                label: item.pbcSystemValue || '',
                value: item.pbcId
              }
            })} /> : <ProFormText width="sm" name={`value${index}`} placeholder="请输入规格描述" />
            }
            </Col>
          </Row>) : null}
          <Row gutter={20}>
            <Col span={24}>
              <ProFormTextArea label="详情描述" name="pbcProductDetail" />
            </Col>
          </Row>
          <Row gutter={20}>
            <Col span={8}>
              <ProFormSelect label="可见范围" name="pbcProductType" valueEnum={Constants.pbcProductType} rules={[
                { required: true, message: '请选择可见范围' },
              ]} />
            </Col>
            <Col span={8}>
              <ProFormSelect label="状态" name="pbcState" valueEnum={Constants.pbcState} rules={[
                { required: true, message: '请选择上下架状态' },
              ]} />
            </Col>
          </Row>
        </ProCard>
      </ProForm>
    </PageContainer>
  );
};

export default Detail;