import styles from './index.module.scss'
import Layout from '~/components/layout'
import { Space, Image as AImage, Row, Col, Button, Divider, Badge } from 'antd'
import { useContext, useEffect, useState } from 'react'
import { DownOutlined, RightOutlined } from '@ant-design/icons'
import Image from 'next/image'
import errImg from '~/assets/errImg'
import { useRouter } from 'next/router'
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react'
import { Navigation } from 'swiper'
import OrderForGoods from './components/orderForGoods'

// Import Swiper styles
import 'swiper/css'
import 'swiper/css/navigation'
import api, { GetLeaseGoodsDetailResp } from './api'
import IntentionModal from './components/intentionModal'
import { UserContext } from '~/lib/userProvider'

export default function MallDetail() {
  const { userInfo, setNeedLogin } = useContext(UserContext)
  const [visible, setVisible] = useState(false) //商品图预览
  const router = useRouter()
  const [id, setId] = useState<number | null>(null)
  const [detail, setDetail] = useState<GetLeaseGoodsDetailResp | null>(null) //详情数据
  const [intentionModalOpen, setIntentionModalOpen] = useState(false) //意向弹窗
  const [productImg, setProductImg] = useState('') //展示的商品图

  //打开意向modal
  const openIntentionModal = () => {
    if (userInfo) {
      setIntentionModalOpen(true)
    } else {
      setNeedLogin(true)
    }
  }

  //提交意向
  const handleIntentionOk = () => {
    setIntentionModalOpen(false)
  }

  const handleIntentionCancel = () => {
    setIntentionModalOpen(false)
  }

  useEffect(() => {
    setId(Number(router.query.id))
  }, [router])

  useEffect(() => {
    if (id) {
      api
        .getLeaseGoodsDetail({
          goodsId: id,
          type: 0,
        })
        .then((res) => {
          setDetail(res.result || null)
          setProductImg(res.result?.images?.[0]?.imgUrl || '')
          const wareList = res.result?.goodsSpec.map(
            (item) => item.productSpecList
          )
          if (wareList) {
            const List: any = wareList.flat()
            setWareSkuList(List)
          }
        })
    }
  }, [id])

  //订单弹框
  const [isorderForGoods, setIsorderForGoods] = useState(false)
  const [wareSkuList, setWareSkuList] = useState<any>()
  const [mallDetail, setMallDetail] = useState<any>()
  return (
    <Layout>
      {/* 意向弹窗 */}
      <IntentionModal
        open={intentionModalOpen}
        detail={detail}
        onOk={handleIntentionOk}
        onCancel={handleIntentionCancel}
        setIsorderForGoods={setIsorderForGoods}
        setMallDetail={setMallDetail}
      ></IntentionModal>
      {!isorderForGoods ? (
        <div
          className="page"
          style={{ marginTop: 20, backgroundColor: '#fff' }}
        >
          <div style={{ display: 'none' }}>
            <AImage.PreviewGroup
              preview={{ visible, onVisibleChange: (vis) => setVisible(vis) }}
            >
              {detail?.images?.map((item) => {
                return <AImage key={item.id} src={item.imgUrl} />
              })}
            </AImage.PreviewGroup>
          </div>
          <Space
            size={30}
            style={{ padding: '22px 24px 0', alignItems: 'start' }}
          >
            {/* 商品图 */}
            <Space size={17} direction="vertical" style={{ width: 300 }}>
              <AImage
                preview={{ visible: false }}
                width={300}
                height={300}
                src={productImg}
                onClick={() => setVisible(true)}
                fallback={errImg}
                style={{
                  borderRadius: 6,
                }}
              />
              <Swiper
                modules={[Navigation]}
                spaceBetween={6}
                slidesPerView={5}
                onSlideChange={() => console.log('slide change')}
                onSwiper={(swiper) => console.log(swiper)}
              >
                {detail?.images?.map((item) => {
                  return (
                    <SwiperSlide key={item.id}>
                      <AImage
                        preview={false}
                        width={50}
                        height={50}
                        src={item.imgUrl}
                        fallback={errImg}
                        style={{ cursor: 'pointer' }}
                        onClick={() => setProductImg(item.imgUrl)}
                      />
                    </SwiperSlide>
                  )
                })}
              </Swiper>
            </Space>

            <Space direction="vertical" size={17}>
              <div className={`${styles.font1} ${styles.ellipsis}`}>
                {detail?.goodsName}
              </div>
              <div className={`${styles.font2} ${styles.ellipsis2}`} style={{}}>
                {detail?.goodsDetail?.goodsDesc}
              </div>
              <Space
                size={24}
                direction="vertical"
                style={{
                  padding: '24px 40px 0px 0',
                  width: 470,
                }}
              >
                <Row wrap={false} justify="space-between">
                  <Col span={12}>
                    <Row>
                      <Col flex="60px" className={styles.font3}>
                        选择
                      </Col>
                      <Col flex="auto" className={styles.font4} style={{}}>
                        已选：1件
                      </Col>
                    </Row>
                  </Col>
                  <Col>
                    <Row align="middle" style={{ cursor: 'pointer' }}>
                      <Col
                        className={styles.font4}
                        onClick={openIntentionModal}
                      >
                        共3种可选
                      </Col>
                      <Col style={{ marginLeft: 9 }}>
                        <DownOutlined
                          style={{
                            fontSize: 12,
                            color: 'RGBA(219, 219, 219, 1)',
                          }}
                        />
                      </Col>
                    </Row>
                  </Col>
                </Row>
                <Row wrap={false}>
                  <Col flex="60px" className={styles.font3}>
                    送至
                  </Col>
                  <Col flex="auto" style={{ cursor: 'pointer' }}>
                    <Space size={5}>
                      <Image
                        alt=""
                        width={18}
                        height={18}
                        src={require('./assets/locate.png')}
                      ></Image>
                      <span className={`${styles.font3} ${styles.ellipsis}`}>
                        广东深圳市南山区万科云城创新谷6栋A座…
                      </span>
                    </Space>
                    <div className={styles.font4} style={{ marginTop: 7 }}>
                      现货，22:00前下单，预计后天（8月30日）送达
                    </div>
                  </Col>
                </Row>
              </Space>
              <Space size={12} style={{ marginTop: 123 }}>
                <Button className={styles.btn1} onClick={openIntentionModal}>
                  加入购物车
                </Button>
                <Button
                  className={styles.btn2}
                  type="primary"
                  onClick={openIntentionModal}
                >
                  提交意向
                </Button>
                <Space size={20} style={{ marginLeft: 19 }}>
                  <div style={{ textAlign: 'center', cursor: 'pointer' }}>
                    <Image
                      alt=""
                      src={require('./assets/phone.png')}
                      width={20}
                      height={20}
                    ></Image>
                    <div className={styles.font5} style={{ marginTop: 5 }}>
                      电话
                    </div>
                  </div>
                  <div style={{ textAlign: 'center', cursor: 'pointer' }}>
                    <Badge count={55} size="small">
                      <Image
                        alt=""
                        src={require('./assets/car.png')}
                        width={20}
                        height={20}
                      ></Image>
                    </Badge>
                    <div className={styles.font5} style={{ marginTop: 5 }}>
                      购物车
                    </div>
                  </div>
                </Space>
              </Space>
            </Space>
          </Space>
          <Divider className={styles.divider}>商品详情</Divider>
          <div style={{ textAlign: 'center' }}>
            <div
              dangerouslySetInnerHTML={{
                __html: detail?.goodsDetail?.content || '',
              }}
            ></div>
          </div>
        </div>
      ) : (
        //订单
        <OrderForGoods
          setIsorderForGoods={setIsorderForGoods}
          detailData={detail}
          mallDetail={mallDetail}
        />
      )}
    </Layout>
  )
}
