import * as React from 'react';
import { ScrollView, View } from 'react-native';
import moment from 'moment';

import Screen from '../../components/Screen';
import KeyValue from '../../components/KeyValue';
import Amount from '../../components/Amount';
import Button from '../../components/Button';

import { LSPOrderState } from '../../models/LSP';

import { localeString } from '../../utils/LocaleUtils';
import { numberWithCommas } from '../../utils/UnitsUtils';
import handleAnything from '../../utils/handleAnything';

interface LSPS7OrderResponseProps {
    navigation: any;
    orderResponse: any;
    orderView: boolean;
}

export default class LSPS7OrderResponse extends React.Component<
    LSPS7OrderResponseProps,
    {}
> {
    render() {
        const { orderResponse, orderView, navigation } = this.props;
        const payment = orderResponse?.payment;
        const channel = orderResponse?.channel;

        return (
            <Screen>
                <ScrollView>
                    <View style={{ paddingHorizontal: 20 }}>
                        {orderResponse?.order_id && (
                            <KeyValue
                                keyValue={localeString('views.LSPS1.orderId')}
                                value={orderResponse?.order_id}
                            />
                        )}

                        {orderResponse?.channel_extension_expiry_blocks && (
                            <KeyValue
                                keyValue={localeString(
                                    'views.LSPS7.channelExtensionBlocks'
                                )}
                                value={numberWithCommas(
                                    orderResponse.channel_extension_expiry_blocks
                                )}
                            />
                        )}

                        {orderResponse?.new_channel_expiry_block && (
                            <KeyValue
                                keyValue={localeString(
                                    'views.LSPS7.proposedExpirationBlock'
                                )}
                                value={numberWithCommas(
                                    orderResponse.new_channel_expiry_block
                                )}
                            />
                        )}
                        {orderResponse?.order_state && (
                            <KeyValue
                                keyValue={localeString(
                                    'views.LSPS1.orderState'
                                )}
                                value={orderResponse?.order_state}
                                color={
                                    orderResponse?.order_state ===
                                    LSPOrderState.CREATED
                                        ? 'orange'
                                        : orderResponse?.order_state ===
                                          LSPOrderState.COMPLETED
                                        ? 'green'
                                        : orderResponse?.order_state ===
                                          LSPOrderState.FAILED
                                        ? 'red'
                                        : ''
                                }
                            />
                        )}
                        {orderResponse?.created_at && (
                            <KeyValue
                                keyValue={localeString('general.createdAt')}
                                value={moment(orderResponse?.created_at).format(
                                    'MMM Do YYYY, h:mm:ss a'
                                )}
                            />
                        )}
                        {channel && (
                            <>
                                <KeyValue
                                    keyValue={localeString(
                                        'views.Channel.title'
                                    )}
                                />
                                <KeyValue
                                    keyValue={localeString(
                                        'views.Channel.scid'
                                    )}
                                    value={channel.short_channel_id}
                                />
                                <KeyValue
                                    keyValue={localeString(
                                        'views.LSPS7.maxChannelExtensionExpiryBlocks'
                                    )}
                                    value={numberWithCommas(
                                        channel.max_channel_extension_expiry_blocks
                                    )}
                                />
                                {channel.expiration_block !== 0 && (
                                    <KeyValue
                                        keyValue={localeString(
                                            'views.LSPS7.expirationBlock'
                                        )}
                                        value={numberWithCommas(
                                            channel.expiration_block
                                        )}
                                    />
                                )}
                                {channel.original_order && (
                                    <>
                                        <KeyValue
                                            keyValue={localeString(
                                                'views.LSPS7.originalOrderId'
                                            )}
                                            value={channel.original_order.id}
                                        />
                                        <KeyValue
                                            keyValue={localeString(
                                                'views.LSPS7.originalService'
                                            )}
                                            value={
                                                channel.original_order.service
                                            }
                                        />
                                    </>
                                )}
                                {channel.extension_order_ids &&
                                    channel.extension_order_ids.length !==
                                        0 && (
                                        <KeyValue
                                            keyValue={localeString(
                                                'views.LSPS7.extensionOrderIds'
                                            )}
                                            value={channel.extension_order_ids.join(
                                                ', '
                                            )}
                                        />
                                    )}
                            </>
                        )}
                        {/* BOLT11 */}
                        {payment && payment.bolt11 && (
                            <>
                                <KeyValue
                                    keyValue={localeString(
                                        'views.LSPS1.bolt11Payment'
                                    )}
                                />
                                {payment?.bolt11.state && (
                                    <KeyValue
                                        keyValue={localeString('general.state')}
                                        value={payment?.bolt11.state}
                                    />
                                )}
                                {payment?.bolt11?.order_total_sat && (
                                    <KeyValue
                                        keyValue={localeString(
                                            'views.LSPS1.orderTotal'
                                        )}
                                        value={
                                            <Amount
                                                sats={
                                                    payment?.bolt11
                                                        ?.order_total_sat
                                                }
                                                toggleable
                                                sensitive
                                            />
                                        }
                                    />
                                )}
                                {payment?.bolt11?.fee_total_sat &&
                                    payment?.bolt11?.fee_total_sat !==
                                        payment?.bolt11?.order_total_sat && (
                                        <KeyValue
                                            keyValue={localeString(
                                                'views.LSPS1.feeTotal'
                                            )}
                                            value={
                                                <Amount
                                                    sats={
                                                        payment?.bolt11
                                                            ?.fee_total_sat
                                                    }
                                                    sensitive
                                                    toggleable
                                                />
                                            }
                                        />
                                    )}
                                {payment?.bolt11.expires_at && (
                                    <KeyValue
                                        keyValue={localeString(
                                            'general.expiresAt'
                                        )}
                                        value={moment(
                                            payment?.bolt11.expires_at
                                        ).format('MMM Do YYYY, h:mm:ss a')}
                                    />
                                )}
                                {payment?.bolt11.invoice && (
                                    <KeyValue
                                        keyValue={localeString(
                                            'views.Invoice.title'
                                        )}
                                        value={payment?.bolt11.invoice}
                                    />
                                )}
                            </>
                        )}
                        {/* On-chain */}
                        {payment && payment.onchain && (
                            <>
                                <KeyValue
                                    keyValue={localeString(
                                        'iews.LSPS1.onchainPayment'
                                    )}
                                />
                                {payment?.onchain.fee_total_sat && (
                                    <KeyValue
                                        keyValue={localeString(
                                            'views.Transaction.totalFees'
                                        )}
                                        value={
                                            <Amount
                                                sats={
                                                    payment?.onchain
                                                        .fee_total_sat
                                                }
                                                sensitive
                                                toggleable
                                            />
                                        }
                                    />
                                )}
                                {payment?.onchain.order_total_sat && (
                                    <KeyValue
                                        keyValue={localeString(
                                            'views.LSPS1.totalOrderValue'
                                        )}
                                        value={
                                            <Amount
                                                sats={
                                                    payment?.onchain
                                                        .order_total_sat
                                                }
                                                toggleable
                                                sensitive
                                            />
                                        }
                                    />
                                )}
                                {payment?.onchain.expires_at && (
                                    <KeyValue
                                        keyValue={localeString(
                                            'general.expiresAt'
                                        )}
                                        value={moment(
                                            payment?.onchain.expires_at
                                        ).format('MMM Do YYYY, h:mm:ss a')}
                                    />
                                )}
                                {payment?.onchain.address && (
                                    <KeyValue
                                        keyValue={localeString(
                                            'general.address'
                                        )}
                                        value={payment?.onchain.address}
                                    />
                                )}
                                {payment?.onchain.min_fee_for_0conf && (
                                    <KeyValue
                                        keyValue={localeString(
                                            'views.LSPS1.miniFeeFor0Conf'
                                        )}
                                        value={
                                            payment?.onchain.min_fee_for_0conf
                                        }
                                    />
                                )}
                                {payment?.onchain
                                    .min_onchain_payment_confirmations && (
                                    <KeyValue
                                        keyValue={localeString(
                                            'views.LSPS1.minOnchainPaymentConfirmations'
                                        )}
                                        value={
                                            payment?.onchain
                                                .min_onchain_payment_confirmations
                                        }
                                    />
                                )}
                            </>
                        )}
                        {orderResponse?.order_state === LSPOrderState.CREATED &&
                            orderView && (
                                <>
                                    {(payment.bolt11?.invoice ||
                                        payment.lightning_invoice ||
                                        payment.bolt11_invoice) && (
                                        <>
                                            <Button
                                                title={
                                                    payment.onchain
                                                        ? localeString(
                                                              'views.LSPS1.makePaymentLN'
                                                          )
                                                        : localeString(
                                                              'views.LSPS1.makePayment'
                                                          )
                                                }
                                                containerStyle={{
                                                    paddingVertical: 20
                                                }}
                                                onPress={() => {
                                                    handleAnything(
                                                        payment.bolt11
                                                            ?.invoice ||
                                                            payment.lightning_invoice ||
                                                            payment.bolt11_invoice
                                                    ).then(([route, props]) => {
                                                        navigation.navigate(
                                                            route,
                                                            props
                                                        );
                                                    });
                                                }}
                                            />
                                        </>
                                    )}
                                    {payment.onchain?.address &&
                                        payment.onchain?.fee_total_sat && (
                                            <>
                                                <Button
                                                    title={
                                                        payment.bolt11
                                                            ? localeString(
                                                                  'views.LSPS1.makePaymentOnchain'
                                                              )
                                                            : localeString(
                                                                  'views.LSPS1.makePayment'
                                                              )
                                                    }
                                                    containerStyle={{
                                                        paddingVertical: 20
                                                    }}
                                                    onPress={() => {
                                                        navigation.navigate(
                                                            'Send',
                                                            {
                                                                destination:
                                                                    payment
                                                                        .onchain
                                                                        ?.address,
                                                                satAmount:
                                                                    payment
                                                                        .onchain
                                                                        ?.fee_total_sat,
                                                                transactionType:
                                                                    'On-chain'
                                                            }
                                                        );
                                                    }}
                                                />
                                            </>
                                        )}
                                </>
                            )}
                    </View>
                </ScrollView>
            </Screen>
        );
    }
}
