import { Text, TouchableOpacity, Button } from "react-native";
import { VStack, HStack, Flex } from "react-native-flex-layout";
import { useState } from "react";
import kazananKim from "./kazanankim";

function Kutu({ value, onPress, disabled, highligted }) {
  return (
    <TouchableOpacity disabled={disabled} onPress={onPress}>
      <Flex
        w={90}
        h={90}
        center
        style={{ backgroundColor: highligted ? "lightgreen" : "gray" }}
      >
        <Text style={{ fontSize: 50 }}>{value}</Text>
      </Flex>
    </TouchableOpacity>
  );
}

function App() {
  const [baslayanOyuncu, setBaslayanOyuncu] = useState("X");

  const [alan, setAlan] = useState(Array(9).fill(null));

  const [highligted, setHighlighted] = useState([]);

  const [kazanan, setKazanan] = useState(null);

  const handlePress = (index) => {
    const newAlan = [...alan];
    newAlan[index] = baslayanOyuncu;
    setAlan(newAlan);

    const kazananSatir = kazananKim(newAlan);
    if (kazananSatir) {
      setHighlighted(kazananSatir);
      setKazanan(baslayanOyuncu);
      alert(`${baslayanOyuncu} kazandı.`);
    }

    setBaslayanOyuncu((prev) => (prev === "X" ? "O" : "X"));
  };

  const getKutu = (index) => (
    <Kutu
      value={alan[index]}
      onPress={() => handlePress(index)}
      highligted={highligted.includes(index)}
      disabled={kazanan || alan[index]}
    />
  );

  const handleReset = () => {
    setBaslayanOyuncu("X");
    setAlan(Array(9).fill(null));
    setHighlighted([]);
    setKazanan(null);
  };

  return (
    <VStack fill center spacing={2}>
      <Text style={{ fontSize: 40 }}>"{baslayanOyuncu}" Oynuyor...</Text>
      <HStack spacing={2} shouldWrapChildren>
        {getKutu(0)}
        {getKutu(1)}
        {getKutu(2)}
      </HStack>
      <HStack spacing={2} shouldWrapChildren>
        {getKutu(3)}
        {getKutu(4)}
        {getKutu(5)}
      </HStack>
      <HStack spacing={2} shouldWrapChildren>
        {getKutu(6)}
        {getKutu(7)}
        {getKutu(8)}
      </HStack>
      <Button title="Reset" onPress={handleReset} />
    </VStack>
  );
}

export default App;