import Taro from '@tarojs/taro';
import { useState, useEffect } from 'react';
import { View, Text, Image } from '@tarojs/components';
import './index.less';
import {
  formatTripDistance,
  formatTripDurationFromSeconds
} from '../../../utils/Robotaxi-public-method';
import { withRobotaxiWhitelist } from '../../../utils/whitelist';
import { showToast } from '../../components/toast';
import { withToast } from '../../components/toast/with-toast';

/** 城市缓存 key */
const SELECTED_CITY_STORAGE_KEY = 'selectedCity';

/** 城市未选择提示文案 */
const RESELECT_CITY_TOAST_TEXT = '请重新选择城市';

/** 城市信息类型 */
interface SelectedCityInfo {
  id?: string;
}

/**
 * 安全获取已选择城市的 id
 * @returns 城市 id
 */
function getSelectedCityId() {
  try {
    const selectedCity = Taro.getStorageSync(SELECTED_CITY_STORAGE_KEY) as SelectedCityInfo | undefined;
    return selectedCity?.id ?? '';
  } catch {
    return '';
  }
}

function OrderPage() {
  const [pricingCard, setPricingCard] = useState<any>(null);
  const [startSite, setStartSite] = useState<any>(null);
  const [endSite, setEndSite] = useState<any>(null);
  const [hasLoadedStorage, setHasLoadedStorage] = useState(false);

  useEffect(() => {
    const card = Taro.getStorageSync('xpPricingCard');
    const start = Taro.getStorageSync('startSite');
    const end = Taro.getStorageSync('endSite');

    if (card) setPricingCard(card);
    if (start) setStartSite(start);
    if (end) setEndSite(end);
    setHasLoadedStorage(true);
  }, []);

  /**
   * 跳转计价规则页
   */
  const toPricingRule = () => {
    const cityID = getSelectedCityId();

    if (!cityID) {
      showToast({
        title: RESELECT_CITY_TOAST_TEXT,
        icon: 'none'
      });
      return;
    }

    Taro.navigateTo({
      url: '/robotaxi/pages/pricing-rules/index?cityID=' + cityID,
    })
  }

  // if (!hasLoadedStorage) return null;

  if (!pricingCard) {
    return (
      <View className='expense-detail-page'>
        <View className='no-data-box'>
          <Image
            className='no-data-image'
            src='https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/no-data-city.png'
          />
          <Text>暂无费用明细</Text>
        </View>
      </View>
    );
  }

  return (
    <View className='expense-detail-page'>
      {/* <View className='car-code'>粤PXV7029</View> */}
      <View className='site-card'>
        <View className='site-line'>
          <View className='start-icon'></View>
          <View className='line'></View>
          <View className='end-icon'></View>
        </View>
        <View className='site-address-box'>
          <View>{startSite?.name || '未知起点'}</View>
          <View>{endSite?.name || '未知终点'}</View>
        </View>
      </View>
      {/* 订单价格 */}
      <View className='price-card'>
        <View className='flex-between-card mb-16'>
          <View className='price-label'>订单总额</View>
          <View className='price-value'>{pricingCard.totalPriceStr}元</View>
        </View>
        <View className='flex-between-card'>
          <View className='price-label'>起步价</View>
          <View className='price-value'>{pricingCard.startPriceStr}元</View>
        </View>
        <View className='flex-between-card mb-16'>
          <View className='price-notice-label'>{pricingCard.time}（{formatTripDistance(pricingCard.distancePriceNormal)}，{formatTripDurationFromSeconds(pricingCard.durationPriceNormal)}）</View>
          <View className='price-notice-value'>{pricingCard.startPriceStr}元</View>
        </View>
        {
          pricingCard.distancePriceStr > 0 &&
          <View>
            <View className='flex-between-card'>
              <View className='price-label'>里程费</View>
              <View className='price-value'>{pricingCard.distancePriceStr}元</View>
            </View>
            <View className='flex-between-card mb-16'>
              <View className='price-notice-label'>普通时段
                {
                  pricingCard.distance > 0 &&
                  <Text>（{formatTripDistance(pricingCard.distance)}）</Text>
                }
              </View>
              <View className='price-notice-value'>{pricingCard.distancePriceStr}元</View>
            </View>
          </View>
        }
        {
          pricingCard.durationPriceStr > 0 &&
          <View>
            <View className='flex-between-card'>
              <View className='price-label'>时长费
                {
                  pricingCard.duration > 0 &&
                  <Text>（{formatTripDurationFromSeconds(pricingCard.duration)}）</Text>
                }
              </View>
              <View className='price-value'>{pricingCard.durationPriceStr}元</View>
            </View>
            <View className='flex-between-card mb-16'>
              <View className='price-notice-label'>普通时段
                {
                  pricingCard.duration > 0 &&
                  <Text>（{formatTripDurationFromSeconds(pricingCard.duration)}）</Text>
                }
              </View>
              <View className='price-notice-value'>{pricingCard.durationPriceStr}元</View>
            </View>
          </View>
        }
        {
          (pricingCard.coupon && pricingCard.coupon > 0 && (pricingCard.totalPriceStr != pricingCard.finalFareStr)) ?
            <View className='flex-between-card'>
              <View className='price-label'>优惠券</View>
              <View className='price-value color-red'>-{(pricingCard.totalPriceStr - pricingCard.finalFareStr).toFixed(2)}元</View>
            </View>
            : null
        }
        {
          (pricingCard.systemDiscount && pricingCard.systemDiscount > 0) ?
            <View className='flex-between-card'>
              <View className='price-label'>限时优惠</View>
              <View className='price-value color-red'>-{pricingCard.systemDiscountStr}元</View>
            </View>
            : null
        }
      </View>
      {/* 总价格 */}
      <View className='flex-card total'>
        <Text className='total-text'>总费用</Text>
        <Text className='num'>{pricingCard.finalFareStr}</Text>
        <Text className='unit'>元</Text>
      </View>
      {/* 质疑事项 */}
      <Text className='notice-txt'>
        当前预估价是基于实时交通情况、预估里程和时长等因素得出；若中途发生修改目的地、路线以及加途径点、里程时长偏差较大等场景，订单结算金额将会重新计算。高速路桥费、停车费、超时等待费、远程调度费、跨域费等，将按行驶过程中实际产生的费用额外收取。
      </Text>
      {/* 查看计价规则 */}
      <View className='look-rule' onClick={() => toPricingRule()}>
        <Text className='look-rule-txt'>查看计价规则</Text>
        <Image className='arrow-icon' src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/Subtract.png"></Image>
      </View>
    </View>
  )
}

export default withRobotaxiWhitelist(withToast(OrderPage));