<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<?import tornadofx.control.Fieldset?>
<?import tornadofx.control.Form?>
<?import tornadofx.control.Field?>
<?import com.sparrowwallet.sparrow.control.CopyableTextField?>

<?import javafx.geometry.Insets?>
<?import com.sparrowwallet.sparrow.control.CopyableLabel?>
<?import javafx.collections.FXCollections?>
<?import com.sparrowwallet.sparrow.control.BlockTargetFeeRatesChart?>
<?import javafx.scene.chart.CategoryAxis?>
<?import javafx.scene.chart.NumberAxis?>
<?import com.sparrowwallet.sparrow.control.TransactionDiagram?>
<?import com.sparrowwallet.drongo.BitcoinUnit?>
<?import com.sparrowwallet.sparrow.control.FiatLabel?>
<?import org.controlsfx.glyphfont.Glyph?>
<?import com.sparrowwallet.sparrow.control.MempoolSizeFeeRatesChart?>
<?import org.controlsfx.control.SegmentedButton?>
<?import com.sparrowwallet.sparrow.wallet.FeeRatesSelection?>

<BorderPane stylesheets="@send.css, @wallet.css, @../script.css, @../general.css" styleClass="wallet-pane" xmlns="http://javafx.com/javafx/10.0.2-internal" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.sparrowwallet.sparrow.wallet.SendController">
    <center>
        <VBox>
            <GridPane styleClass="send-form" hgap="10.0" vgap="10.0">
                <padding>
                    <Insets left="25.0" right="25.0" top="25.0" />
                </padding>
                <columnConstraints>
                    <ColumnConstraints prefWidth="410" />
                    <ColumnConstraints prefWidth="200" />
                    <ColumnConstraints prefWidth="140" />
                </columnConstraints>
                <rowConstraints>
                    <RowConstraints />
                </rowConstraints>
                <BorderPane GridPane.columnIndex="0" GridPane.rowIndex="0" GridPane.columnSpan="3">
                    <top>
                        <Form styleClass="title-form">
                            <Fieldset inputGrow="ALWAYS" text="Send"/>
                        </Form>
                    </top>
                    <center>
                        <TabPane fx:id="paymentTabs" side="RIGHT" styleClass="initial" />
                    </center>
                </BorderPane>
                <Form styleClass="title-form" GridPane.columnIndex="0" GridPane.rowIndex="1">
                    <Fieldset inputGrow="ALWAYS" text="Fee"/>
                </Form>
                <HBox GridPane.columnIndex="1" GridPane.rowIndex="1" GridPane.columnSpan="2" GridPane.halignment="RIGHT" alignment="CENTER_RIGHT">
                    <padding>
                        <Insets right="10.0" />
                    </padding>
                    <SegmentedButton>
                        <toggleGroup>
                            <ToggleGroup fx:id="feeSelectionToggleGroup" />
                        </toggleGroup>
                        <buttons>
                            <ToggleButton fx:id="targetBlocksToggle" text="Target Blocks" toggleGroup="$feeSelectionToggleGroup">
                                <tooltip>
                                    <Tooltip text="Determine fee via estimated number of blocks"/>
                                </tooltip>
                                <userData>
                                    <FeeRatesSelection fx:constant="BLOCK_TARGET"/>
                                </userData>
                            </ToggleButton>
                            <ToggleButton fx:id="mempoolSizeToggle" text="Mempool Size" toggleGroup="$feeSelectionToggleGroup">
                                <tooltip>
                                    <Tooltip text="Determine fee via current mempool size"/>
                                </tooltip>
                                <userData>
                                    <FeeRatesSelection fx:constant="MEMPOOL_SIZE"/>
                                </userData>
                            </ToggleButton>
                        </buttons>
                    </SegmentedButton>
                </HBox>
                <Form GridPane.columnIndex="0" GridPane.rowIndex="2">
                    <Fieldset inputGrow="SOMETIMES">
                        <Field fx:id="targetBlocksField" text="Block target">
                            <Slider fx:id="targetBlocks" snapToTicks="true" showTickLabels="true" showTickMarks="true" />
                        </Field>
                        <Field fx:id="feeRangeField" text="Rate Range:">
                            <Slider fx:id="feeRange" snapToTicks="false" showTickLabels="true" showTickMarks="true" />
                        </Field>
                        <Field fx:id="feeRateField" text="Rate:">
                            <CopyableLabel fx:id="feeRate" />
                            <Region HBox.hgrow="ALWAYS" />
                            <Label fx:id="feeRatePriority" graphicTextGap="5" contentDisplay="RIGHT">
                                <graphic>
                                    <Glyph fx:id="feeRatePriorityGlyph" fontFamily="Font Awesome 5 Free Solid" fontSize="12" icon="CIRCLE" />
                                </graphic>
                            </Label>
                        </Field>
                        <Field text="Fee:">
                            <TextField fx:id="fee" styleClass="amount-field"/>
                            <ComboBox fx:id="feeAmountUnit" styleClass="amount-unit">
                                <items>
                                    <FXCollections fx:factory="observableArrayList">
                                        <BitcoinUnit fx:constant="BTC" />
                                        <BitcoinUnit fx:constant="SATOSHIS" />
                                    </FXCollections>
                                </items>
                            </ComboBox>
                            <Label style="-fx-pref-width: 15" />
                            <FiatLabel fx:id="fiatFeeAmount" />
                        </Field>
                    </Fieldset>
                </Form>
                <AnchorPane GridPane.columnIndex="1" GridPane.rowIndex="2" GridPane.columnSpan="2">
                    <BlockTargetFeeRatesChart fx:id="blockTargetFeeRatesChart" styleClass="feeRatesChart" legendVisible="false" AnchorPane.topAnchor="10" AnchorPane.leftAnchor="20" animated="false">
                        <xAxis>
                            <CategoryAxis side="BOTTOM" />
                        </xAxis>
                        <yAxis>
                            <NumberAxis side="LEFT" />
                        </yAxis>
                    </BlockTargetFeeRatesChart>
                    <MempoolSizeFeeRatesChart fx:id="mempoolSizeFeeRatesChart" styleClass="feeRatesChart" legendVisible="false" AnchorPane.topAnchor="10" AnchorPane.leftAnchor="20" animated="false">
                        <xAxis>
                            <CategoryAxis side="BOTTOM" />
                        </xAxis>
                        <yAxis>
                            <NumberAxis side="LEFT" />
                        </yAxis>
                    </MempoolSizeFeeRatesChart>
                </AnchorPane>
            </GridPane>
            <AnchorPane>
                <TransactionDiagram fx:id="transactionDiagram" maxWidth="700" AnchorPane.leftAnchor="100" />
            </AnchorPane>
        </VBox>
    </center>
    <bottom>
        <AnchorPane>
            <padding>
                <Insets left="25.0" right="25.0" bottom="25.0" />
            </padding>
            <HBox AnchorPane.rightAnchor="10">
                <Button fx:id="clearButton" text="Clear" cancelButton="true" onAction="#clear" />
                <Region HBox.hgrow="ALWAYS" style="-fx-min-width: 20px" />
                <Button fx:id="createButton" text="Create Transaction" defaultButton="true" disable="true" contentDisplay="RIGHT" graphicTextGap="5" onAction="#createTransaction">
                    <graphic>
                        <Glyph fontFamily="Font Awesome 5 Free Solid" fontSize="12" icon="ANGLE_DOUBLE_RIGHT" />
                    </graphic>
                </Button>
            </HBox>
        </AnchorPane>
    </bottom>
</BorderPane>
