import useColor from "@/lib/hooks/useColor";
import {
 Avatar,
 Box,
 Button,
 Center,
 Code,
 Flex,
 Icon,
 IconButton,
 Text,
 Tooltip
} from "@chakra-ui/react";
import {
 faArrowUpRightFromSquare,
 faXmark
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import "@uiw/react-textarea-code-editor/dist.css";
import { signIn, signOut, useSession } from "next-auth/react";
import dynamic from "next/dynamic";
import Link from "next/link";
import { ComponentProps, useRef } from "react";
import useIssue from "../hooks/useIssue";
import useSearch from "../hooks/useSearch";
const CodeEditor = dynamic(
 () => import("@uiw/react-textarea-code-editor").then(mod => mod.default),
 { ssr: false }
);
export default function SolutionSubmitForm() {
 const { createIssueMutation } = useIssue();
 const codeRef = useRef(null);
 const {
 result: { selectedProb, code },
 setCode
 } = useSearch();
 const { data: session } = useSession();
 if (!selectedProb) {
 return (
 <Center w="full" h="120px">
 <Text fontSize="xl">검색 후 문제를 선택해주세요</Text>
 </Center>
 );
 }
 return (
 <>
 <Text w="full" fontSize="2xl">
 선택한 문제
 </Text>
 <SelectedProb />
 <Text w="full" fontSize="2xl">
 아래에 정답을 입력해주세요
 </Text>
 <CodeEditor
 value={code}
 language="js"
 placeholder="Please enter JS code."
 onChange={evn => setCode(evn.target.value)}
 padding={15}
 style={{
 fontSize: 12,
 backgroundColor: "#f5f5f5",
 fontFamily:
 "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace"
 }}
 />
 <Flex w="full" gap="20px" align="center">
 {session?.user ? (
 <>
 <Avatar src={session.user.image ?? ""} />
 <Text fontWeight="bold">{session.user.name}</Text>
 <Button
 onClick={() => {
 signOut();
 }}
 >
 로그아웃
 </Button>
 <Button
 colorScheme="blue"
 onClick={() => {
 createIssueMutation.mutate({
 title: `Level ${selectedProb?.level} | ${selectedProb?.title} 풀이 | | ${session.user?.name}`,
 code,
 assignees: [session.user?.name ?? "", "codeisneverodd"]
 });
 }}
 >
 제출
 </Button>
 </>
 ) : (
 <>
 <Button
 onClick={() => {
 signIn();
 }}
 >
 GitHub 로그인
 </Button>
 <Button isDisabled>로그인 후 제출해주세요</Button>
 </>
 )}
 </Flex>
 </>
 );
}
function SelectedProb(props: ComponentProps<typeof Flex>) {
 const {
 result: { selectedProb },
 reset
 } = useSearch();
 const { subtleBg, levelColors } = useColor();
 if (!selectedProb) return null;
 const { id, level, title } = selectedProb;
 return (
 <Flex
 key={id}
 alignItems="center"
 gap="20px"
 w="full"
 h="60px"
 rounded="none"
 bg={subtleBg}
 pr="20px"
 {...props}
 >
 <Text
 textAlign="center"
 w="60px"
 fontSize="lg"
 color={levelColors[level]}
 fontWeight="bold"
 >
 {level}
 </Text>
 <Text flex="1">{title}</Text>
 <Link
 href={`https://school.programmers.co.kr/learn/courses/30/lessons/${id}`}
 target="_blank"
 >
 <Tooltip label="프로그래머스에서 문제 보기" placement="top">
 <IconButton
 variant="ghost"
 icon={<Icon as={FontAwesomeIcon} icon={faArrowUpRightFromSquare} />}
 aria-label="문제 보기"
 />
 </Tooltip>
 </Link>
 <IconButton
 variant="ghost"
 icon={<Icon as={FontAwesomeIcon} icon={faXmark} />}
 onClick={() => {
 reset();
 }}
 aria-label="문제 선택 해제"
 />
 </Flex>
 );
}