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 dayjs from 'dayjs';

type FormData = {
  birthday: Date;
  appointmentDate: Date;
  startTime: Date;
  endTime: Date;
  workDate: Date;
  meetingTime: Date;
  deadlineDate: Date;
  eventTime: Date;
};

const DatePickerExamplesDemo: React.FC = () => {
  const form = Form.useForm<FormData>({
    defaultValues: {
      birthday: undefined,
      appointmentDate: undefined,
      startTime: undefined,
      endTime: undefined,
      workDate: new Date(),
      meetingTime: undefined,
      deadlineDate: undefined,
      eventTime: undefined,
    },
  });

  const [fixedDate, setFixedDate] = React.useState<Date>(
    new Date('2025-01-01')
  );

  const onSubmit = (data: FormData) => {
    console.log('Form submitted:', data);
    Toast(
      `提交成功！\n生日: ${
        data.birthday ? dayjs(data.birthday).format('YYYY-MM-DD') : '未选择'
      }\n预约日期: ${
        data.appointmentDate
          ? dayjs(data.appointmentDate).format('YYYY-MM-DD HH:mm')
          : '未选择'
      }`
    );
  };

  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}>
          {/* 基础日期选择示例 */}
          <Card title="1. 基础日期选择" style={styles.cardStyle} noSpace>
            <Form.DatePicker
              name="birthday"
              label="生日"
              placeholder="请选择生日"
              mode="Y-D"
              rules={{ required: '请选择生日' }}
              message="选择您的出生日期"
              max={new Date()}
              min={dayjs().subtract(100, 'years').toDate()}
            />

            <Form.DatePicker
              name="workDate"
              label="工作日期"
              placeholder="请选择工作日期"
              mode="Y-D"
              rules={{
                required: '请选择工作日期',
                validate: (value: Date) => {
                  if (dayjs(value).isBefore(dayjs(), 'day')) {
                    return '工作日期不能早于今天';
                  }
                  return true;
                },
              }}
              message="选择开始工作的日期"
              min={new Date()}
              max={dayjs().add(1, 'year').toDate()}
            />
          </Card>

          {/* 时间选择示例 */}
          <Card title="2. 时间选择示例" style={styles.cardStyle} noSpace>
            <Form.DatePicker
              name="meetingTime"
              label="会议时间"
              placeholder="请选择会议时间"
              mode="Y-m"
              rules={{ required: '请选择会议时间' }}
              message="选择具体的会议时间"
              min={new Date()}
              max={dayjs().add(30, 'days').toDate()}
            />

            <Form.DatePicker
              name="startTime"
              label="开始时间"
              placeholder="请选择开始时间"
              mode="h-m"
              rules={{ required: '请选择开始时间' }}
              message="选择任务开始时间"
            />

            <Form.DatePicker
              name="endTime"
              label="结束时间"
              placeholder="请选择结束时间"
              mode="h-m"
              rules={{
                required: '请选择结束时间',
                validate: (value: Date) => {
                  const startTime = form.getValues('startTime');
                  if (startTime && dayjs(value).isBefore(dayjs(startTime))) {
                    return '结束时间不能早于开始时间';
                  }
                  return true;
                },
              }}
              message="选择任务结束时间"
            />
          </Card>

          {/* 高级配置示例 */}
          <Card title="3. 高级配置示例" style={styles.cardStyle} noSpace>
            <Form.Item
              name="appointmentDate"
              label="预约日期"
              message="选择预约的具体日期和时间"
              rules={{
                required: '请选择预约日期',
                validate: (value: Date) => {
                  const now = dayjs();
                  const selected = dayjs(value);

                  if (selected.isBefore(now, 'minute')) {
                    return '预约时间不能早于当前时间';
                  }

                  if (selected.isAfter(now.add(3, 'months'))) {
                    return '预约时间不能超过3个月后';
                  }

                  // 不允许选择周末
                  if (selected.day() === 0 || selected.day() === 6) {
                    return '预约时间不能选择周末';
                  }

                  // 只允许工作时间 9:00-18:00
                  const hour = selected.hour();
                  if (hour < 9 || hour >= 18) {
                    return '预约时间只能在工作时间 9:00-18:00';
                  }

                  return true;
                },
              }}
            >
              <Form.DatePicker
                name="appointmentDate"
                mode="Y-m"
                placeholder="请选择预约日期和时间"
                min={new Date()}
                max={dayjs().add(3, 'months').toDate()}
                confirmButtonText="确认预约"
                title="选择预约时间"
              />
            </Form.Item>

            <Form.DatePicker
              name="deadlineDate"
              label="截止日期"
              placeholder="请选择截止日期"
              defaultValue={new Date()}
              mode="Y-D"
              rules={{
                required: '请选择截止日期',
                validate: (value: Date) => {
                  const workDate = form.getValues('workDate');
                  if (workDate && dayjs(value).isBefore(dayjs(workDate))) {
                    return '截止日期不能早于工作开始日期';
                  }
                  return true;
                },
              }}
              message="选择任务或项目的截止日期"
              min={dayjs().add(1, 'day').toDate()}
              confirmButtonText="设置截止日期"
              cancelButtonText="取消"
              title="设置截止时间"
            />
          </Card>

          {/* 不同模式示例 */}
          <Card title="4. 不同选择模式示例" style={styles.cardStyle} noSpace>
            <Form.DatePicker
              name="yearMonth"
              label="年月选择"
              placeholder="请选择年月"
              mode="Y-M"
              rules={{ required: '请选择年月' }}
              message="只选择年份和月份"
            />

            <Form.DatePicker
              name="monthDay"
              label="月日选择"
              placeholder="请选择月日"
              mode="M-D"
              message="选择生日（不含年份）"
            />

            <Form.DatePicker
              name="eventTime"
              label="活动时间"
              placeholder="请选择活动时间"
              mode="Y-s"
              rules={{ required: '请选择活动时间' }}
              message="精确到秒的时间选择"
              min={new Date()}
              max={dayjs().add(1, 'week').toDate()}
            />

            <Form.DatePicker
              name="timeOnly"
              label="时间选择"
              placeholder="请选择时间"
              mode="h-m"
              message="只选择时分，不含日期"
            />
          </Card>

          {/* 禁用状态示例 */}
          <Card title="5. 禁用状态示例" style={styles.cardStyle} noSpace>
            <Form.DatePicker
              name="readonlyDate"
              label="只读日期"
              placeholder="此字段为只读"
              mode="Y-D"
              disabled
              message="此日期字段当前不可编辑"
            />

            <Form.Item
              name="conditionalDate"
              label="条件启用日期"
              message="需要先选择工作日期才能启用"
            >
              <Form.DatePicker
                name="conditionalDate"
                mode="Y-D"
                placeholder="请先选择工作日期"
                disabled={!form.watch('workDate')}
                min={form.watch('workDate') || new Date()}
              />
            </Form.Item>
          </Card>

          {/* 自定义输入框样式示例 */}
          <Card title="6. 自定义样式示例" style={styles.cardStyle} noSpace>
            <Form.DatePicker
              name="styledDate"
              label="自定义样式"
              placeholder="带自定义样式的日期选择"
              mode="Y-D"
              message="展示自定义输入框样式"
              inputProps={{
                style: {
                  borderColor: '#007AFF',
                  borderRadius: 8,
                },
                prefix: '📅',
              }}
            />

            <Form.DatePicker
              name="compactDate"
              label="紧凑模式"
              placeholder="紧凑显示的日期"
              mode="Y-D"
              message="紧凑样式的日期选择器"
              inputProps={{
                size: 'small',
              }}
            />
          </Card>
        </Form.FormProvider>
        <Card title="7. 传入 value 优先级示例" style={styles.cardStyle} noSpace>
          <View style={{ padding: 12 }}>
            <Text style={{ marginBottom: 8 }}>
              当前值：{dayjs(fixedDate).format('YYYY-MM-DD')}
            </Text>
            <Form.DatePicker
              control={form.control}
              name="fixedDate"
              label="固定日期（外部指定）"
              mode="Y-D"
              value={fixedDate}
              onConfirm={(v) => setFixedDate(v)}
            />
          </View>
        </Card>
      </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 DatePickerExamplesDemo;