import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import Form from '../index';
import Button from '../../Button';
import { ScrollView } from 'react-native';
import BottomSafeArea from '../../BottomSafeArea';
import { Fill, Toast } from '@xrnjs/ui';
import Card from '_global/Card';
import AmountInput from '../../AmountInput';
import { Values } from '../../AmountInput/interface';

type FormData = {
  transferAmount: Values;
  depositAmount: Values;
  withdrawAmount: Values;
  tradeAmount: Values;
};

const AmountInputExamplesDemo: React.FC = () => {
  const form = Form.useForm<FormData>({
    defaultValues: {
      transferAmount: { amount: '', currency: 'USD' },
      depositAmount: { amount: '', currency: 'CNY' },
      withdrawAmount: { amount: '', currency: 'EUR' },
      tradeAmount: { amount: '', currency: 'USD' },
    },
  });

  const [transferAmountFixed, setTransferAmountFixed] = React.useState<Values>({
    amount: '123.45',
    currency: 'USD',
  });

  const onSubmit = (data: FormData) => {
    console.log('Form submitted:', data);
    Toast(
      `提交成功！\n转账: ${data.transferAmount.amount} ${data.transferAmount.currency}\n存款: ${data.depositAmount.amount} ${data.depositAmount.currency}`
    );
  };

  const onError = (errors: Record<string, unknown>) => {
    console.log('Form errors:', errors);
  };

  return (
    <View style={styles.container}>
      <ScrollView
        style={styles.scrollContainer}
        keyboardShouldPersistTaps="handled"
      >
        <Form.FormProvider {...form}>
          {/* Form.AmountInput 快捷用法 */}
          <Card
            title="1. Form.AmountInput 快捷用法"
            style={styles.cardStyle}
            noSpace
          >
            <Form.AmountInput
              name="transferAmount"
              label="转账金额"
              message="请输入转账金额和选择货币类型"
              showSelectCurrency
              showBalance
              availableBalanceText="可用余额"
              options={[
                {
                  label: 'USD',
                  subLabel: '美元',
                  value: 'USD',
                  contentLabel: '10000',
                  balance: '10000',
                  prefixIcon:
                    'https://images.unsplash.com/photo-1567945716310-4745a6b7844b',
                },
                {
                  label: 'EUR',
                  subLabel: '欧元',
                  value: 'EUR',
                  contentLabel: '8500',
                  balance: '8500',
                  prefixIcon:
                    'https://images.pexels.com/photos/33183864/pexels-photo-33183864.jpeg',
                },
                {
                  label: 'CNY',
                  subLabel: '人民币',
                  value: 'CNY',
                  contentLabel: '68000',
                  balance: '68000',
                  prefixIcon:
                    'https://images.pexels.com/photos/33121633/pexels-photo-33121633.jpeg',
                },
              ]}
              rules={{
                required: '请输入转账金额',
                validate: (value: Values) => {
                  if (!value.amount || parseFloat(value.amount) <= 0) {
                    return '转账金额必须大于0';
                  }
                  if (parseFloat(value.amount) > 10000) {
                    return '转账金额不能超过可用余额';
                  }
                  return true;
                },
              }}
            />
          </Card>

          {/* Form.Item + AmountInput 组合用法 */}
          <Card
            title="2. Form.Item + AmountInput 组合用法"
            style={styles.cardStyle}
            noSpace
          >
            <Form.Item
              name="depositAmount"
              label="存款金额"
              message="选择存款货币和金额"
              hideInternalMessage
              rules={{
                required: '请输入存款金额',
                validate: (value: Values) => {
                  if (!value.amount) {
                    return '请输入存款金额';
                  }
                  if (parseFloat(value.amount) < 100) {
                    return '最小存款金额为100';
                  }
                  return true;
                },
              }}
            >
              <AmountInput
                placeholder="0.00"
                precision={2}
                showSellAll={false}
                options={[
                  {
                    label: 'CNY',
                    subLabel: '人民币',
                    value: 'CNY',
                    contentLabel: '50000',
                  },
                  {
                    label: 'USD',
                    subLabel: '美元',
                    value: 'USD',
                    contentLabel: '7500',
                  },
                  {
                    label: 'HKD',
                    subLabel: '港币',
                    value: 'HKD',
                    contentLabel: '15000',
                  },
                ]}
              />
            </Form.Item>
          </Card>

          {/* 高级配置示例 */}
          <Card title="3. 高级配置示例" style={styles.cardStyle} noSpace>
            <Form.AmountInput
              name="withdrawAmount"
              label="提现金额"
              message="设置提现金额，支持多种货币"
              showSelectCurrency
              showBalance
              showSellAll
              availableBalanceText="可提现余额"
              precision={4}
              options={[
                {
                  label: 'EUR',
                  subLabel: '欧元',
                  value: 'EUR',
                  contentLabel: '5000.50',
                  balance: '5000.50',
                },
                {
                  label: 'GBP',
                  subLabel: '英镑',
                  value: 'GBP',
                  contentLabel: '3200.75',
                  balance: '3200.75',
                },
                {
                  label: 'JPY',
                  subLabel: '日元',
                  value: 'JPY',
                  contentLabel: '120000',
                  balance: '120000',
                },
              ]}
              rules={{
                required: '请输入提现金额',
                validate: (value: Values) => {
                  if (!value.amount || parseFloat(value.amount) <= 0) {
                    return '提现金额必须大于0';
                  }
                  // 不同货币的最小提现限制
                  const minAmounts = {
                    EUR: 10,
                    GBP: 10,
                    JPY: 1000,
                  } as const;
                  const minAmount =
                    minAmounts[value.currency as keyof typeof minAmounts] || 10;
                  if (parseFloat(value.amount) < minAmount) {
                    return `${value.currency} 最小提现金额为 ${minAmount}`;
                  }
                  return true;
                },
              }}
            />

            <Form.AmountInput
              name="tradeAmount"
              label="交易金额"
              message="输入交易金额，自动计算手续费"
              showSelectCurrency={false}
              showBalance={false}
              precision={8}
              placeholder="请输入交易金额"
              options={[
                {
                  label: 'BTC',
                  subLabel: '比特币',
                  value: 'BTC',
                  contentLabel: '0.12345678',
                },
              ]}
              rules={{
                required: '请输入交易金额',
                validate: (value: Values) => {
                  if (!value.amount || parseFloat(value.amount) <= 0) {
                    return '交易金额必须大于0';
                  }
                  if (parseFloat(value.amount) < 0.001) {
                    return 'BTC 最小交易金额为 0.001';
                  }
                  if (parseFloat(value.amount) > 10) {
                    return 'BTC 最大交易金额为 10';
                  }
                  return true;
                },
              }}
            />
          </Card>
          <Card
            title="4. 传入 value 优先级示例"
            style={styles.cardStyle}
            noSpace
          >
            <View style={{ padding: 12 }}>
              <Text style={{ marginBottom: 8 }}>
                当前值：{transferAmountFixed.amount}{' '}
                {transferAmountFixed.currency}
              </Text>
              <Form.AmountInput
                control={form.control}
                name="transferAmountFixed"
                label="转账金额（外部指定）"
                value={transferAmountFixed}
                options={[
                  { label: 'USD', value: 'USD', contentLabel: '10000' },
                  { label: 'EUR', value: 'EUR', contentLabel: '8500' },
                ]}
                onChange={(v: Values) => setTransferAmountFixed(v)}
              />
            </View>
          </Card>
        </Form.FormProvider>
      </ScrollView>

      <View style={styles.fixedButtonContainer}>
        <Button onPress={form.handleSubmit(onSubmit, onError)}>提交</Button>
        <View style={styles.buttonSpacer} />
        <Button fill={Fill.dashed} onPress={() => form.reset()}>
          重置
        </Button>
        <BottomSafeArea />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  scrollContainer: {
    flex: 1,
    padding: 20,
    paddingBottom: 0,
  },
  cardStyle: {
    marginBottom: 16,
  },
  fixedButtonContainer: {
    backgroundColor: '#fff',
    paddingHorizontal: 20,
    paddingTop: 16,
    paddingBottom: 30,
    borderTopWidth: 1,
    borderTopColor: '#e5e5e5',
    flexDirection: 'row',
    justifyContent: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: -2,
    },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 8,
  },
  buttonSpacer: {
    width: 20,
  },
});

export default AmountInputExamplesDemo;