import { ThemedText } from '@/components/ThemedText';
import { View, ScrollView, Text, StyleSheet, Pressable } from 'react-native';
import { Link, useRouter } from 'expo-router';
import StatusItem from '@/components/ui/StatusItem';
import { useState } from 'react';
// import { Modal, Portal } from 'react-native-paper';

import { Button, ButtonText } from "@/components/ui/button";

export default function Index() {
  const router = useRouter();

  return (
    <>
      <ScrollView style={{ backgroundColor: '#f6f7fb' }}>
        <View style={{ height: 300, backgroundColor: '#ccc' }}></View>
        <View style={styles.config}>
          <Text>北京铁路局/客运段/京沪线/左侧</Text>
          <Link href={'/setting'} style={{ color: '#3165D2' }}>
            修改
          </Link>
        </View>
        <View style={styles.btnBox}>
          <Button style={styles.btn} size="md" variant="solid" action="primary" >
            <ButtonText>开始测量</ButtonText>
          </Button>
          <Button style={styles.btn} size="md" variant="solid" action="primary" onPress={()=>router.push('/save')} >
            <ButtonText>保存</ButtonText>
          </Button>
          {/* <Pressable
            style={({ pressed }) => [styles.btn, { opacity: pressed ? 0.7 : 1 }]}
            onPress={() => {}}>
            <Text style={styles.btnText}>开始测量</Text>
          </Pressable>
          <Pressable
            style={({ pressed }) => [styles.btn, { opacity: pressed ? 0.7 : 1 }]}
            onPress={showModal}>
            <Text style={styles.btnText}>保存</Text>
          </Pressable> */}
        </View>
        <View style={styles.statusBox}>
          <View style={styles.subStatus}>
            <StatusItem text={'移到顶部停留2秒'} />
            <StatusItem text={'开始测量左侧'} />
            <StatusItem text={'左侧测量完成'} />
          </View>
          <View style={styles.subStatus}>
            <StatusItem text={'移到顶部停留2秒'} />
            <StatusItem text={'开始测量右侧'} />
            <StatusItem text={'右侧测量完成'} />
          </View>
        </View>
      </ScrollView>
    </>
  );
}

const styles = StyleSheet.create({
  config: {
    height: 40,
    backgroundColor: '#e3e8f5',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 16,
  },
  btnBox: {
    flexDirection: 'row',
    paddingHorizontal: 20,
    justifyContent: 'space-between',
    gap: 20,
    marginVertical: 16,
  },
  btn: {
    flex: 1,
    height: 40,
    // borderRadius: 4,
    // color: '#fff',
    // lineHeight: 40,
    // justifyContent: 'center',
    backgroundColor: '#3165D2',
  },
  btnText: {
    color: '#FFF',
    textAlign: 'center',
    fontSize: 16,
  },
  statusBox: {
    flexDirection: 'row',
    paddingHorizontal: 16,
    gap: 16,
    marginBottom: 16,
  },
  subStatus: {
    flex: 1,
    gap: 10,
  },
});