class DetailPage extends StatelessWidget {
  const DetailPage({super.key});

  @override
  Widget build(BuildContext context) {
    final args =
        ModalRoute.of(context)!.settings.arguments as DetailPageArguments;

    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter Demo at Detail Page"),
      ),
      body: Center(
        child: ConstrainedBox(
          constraints: const BoxConstraints(minWidth: 120),
          child: Center(
            child: Text(
              args.value.toString(),
              style: const TextStyle(fontSize: 72),
            ),
          ),
        ),
      ),
    );
  }
}

const DetailPage: React.FC = () => {
    // from react-navigation
    const route = useRoute<RouteProp<RootStackParamList, 'Detail'>>();
    return (
        <View>
            <Header title={'Expo Demo at Detail Page'} />
            <CenterLayout>
                <Counter value={route.params.value}/>
            </CenterLayout>
        </View>
    );
}

const Header : React.FC<{title: String}> = (props) => {
    const {title} = props;
    return (
        <View style={styles.header}>
            <Text style={styles.title}>
                {title}
            </Text>
        </View>
    )
}

const CenterLayout: React.FC<{children: React.ReactNode}> = (props) => {
    const {children} = props;
    return (
        <View style={styles.layout}>
            {children}
        </View>
    )
}

const Counter: React.FC<{value: number}> = (props) => {
    const {value} = props;
    return (
        <View style={styles.counterLayout}>
            <Text style={styles.counterLabel}>{value}</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    header: {
        position: "absolute",
        top: 0,
        left: 0,
        width: '100%',
        backgroundColor: '#20232A',
        padding: '24px 0',
    },
    title: {
        color: '#61dafb',
        textAlign: 'center',
    },
    layout: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100vh',
    },
    counterLayout: {
        minWidth: 120,
        textAlign: 'center'
    },
    counterLabel: {
        fontSize: 72,
    }
});

@Composable
fun DetailPage(router: Router, params: Map<String, List<String>>?) {
    Div {
        components.Header(title = "Compose for web Demo at Detail Page")
        CenterLayout {
            params?.get("value")?.get(0)?.let { Counter(it.toInt()) }
        }
    }
}

@Composable
fun Header(title: String) {
  H1(attrs = {
    style {
      position(Position.Fixed)
      top(0.px)
      left(0.px)
      paddingTop(24.px)
      paddingBottom(24.px)
      backgroundColor(Color("#7F52FF"))
      color(Color("#E8F0FE"))
      textAlign("center")
      width(100.percent)
    }
  }) {
    Text(title)
  }
}

@Composable
fun CenterLayout(content: @Composable () -> Unit) {
  Div(attrs = {
    style {
      display(DisplayStyle.Flex)
      flexDirection(FlexDirection.Row)
      justifyContent(JustifyContent.Center)
      alignItems(AlignItems.Center)
      height(100.vh)
    }
  }) {
    content()
  }
}

@Composable
fun Counter(value: Int) {
  Span(attrs = {
    style {
      minWidth(120.px)
      textAlign("center")
      fontSize(24.px)
    }
  }) {
    Text(value.toString())
  }
}