import './WaitPayOrder.scss';
import { View } from '@tarojs/components';
import OrderTitle from '@/pages/Order/components/OrderTitle/OrderTitle';
import OrderInfo from '@/pages/Order/components/OrderInfo/OrderInfo';
import OrderPayway from '@/pages/Order/components/OrderPayway/OrderPayway';
import useWaitPayOrderState from '@/hooks/useWaitPayOrderState';
import { useSelector, useDispatch } from '@tarojs/redux';
import { Customer } from '@/types/Customer/Customer';
import { updateOrderState } from '@/store/rootReducers/orderState';
import { PayOrderState } from '@/store/rootReducers/orderState';

const WaitPayOrderComponent = () => {
  const dispatch = useDispatch();
  const userinfo = useSelector(
    (state: { userinfo: Customer }) => state.userinfo,
  );
  const payOrderState = useSelector(
    (state: { orderState: PayOrderState }) =>
      state.orderState.waitPayOrderState,
  );

  const { payInfos, accountList, orderInfo } = useWaitPayOrderState(
    userinfo.customerId,
  );

  const payDoneHandle = () => {
    dispatch(updateOrderState(false));
  };

  return payOrderState ? (
    <View className='OrderBox'>
      <OrderTitle price={orderInfo.payableMoney} />
      <OrderInfo orderInfo={orderInfo} />
      <OrderPayway
        onPayDoneCallback={payDoneHandle}
        userinfo={userinfo}
        accounts={accountList}
        orderInfo={orderInfo}
        payInfos={payInfos}
      />
    </View>
  ) : null;
};

export default WaitPayOrderComponent;
