import { Text, Box, Heading, Image, Center, Button, Flex, VStack, Divider, useToast, FormControl, FormLabel, FormHelperText, Input, FormErrorMessage, HStack, Wrap, useMediaQuery, Avatar, Textarea, Modal, ModalOverlay, ModalContent, ModalBody, useDisclosure, Alert, AlertIcon, } from "@chakra-ui/react"
import Card from "components/card"
import Nav from "layouts/nav/nav"
import PageContainer from "layouts/page-container"
import Sidebar from "layouts/sidebar/sidebar"
import React, { useEffect, useState } from "react"
import { adminLinks, orgSettingLinks, settingLinks } from "src/data/links"
import { requestApi } from "utils/axios/request"
import { useRouter } from "next/router"
import { Field, Form, Formik } from "formik"
import { config } from "configs/config"
import Tags from "components/tags/tags"
var validator = require('validator');

const UserProfilePage = () => {
    const { isOpen, onOpen, onClose } = useDisclosure()
    const [org, setOrg] = useState(null)
    const [newOnwer, setNewOnwer] = useState('')

    const [isLargerThan1280] = useMediaQuery("(min-width: 768px)")
    const router = useRouter()
    useEffect(() => {
        if (router.query.org_id) {
            requestApi.get(`/user/info/${router.query.org_id}`).then(res => setOrg(res.data))
        }

    }, [router.query.org_id])

    const toast = useToast()

    const submitUser = async (values, _) => {
        await requestApi.post(`/org/update`, values)
        setOrg(values)
        toast({
            description: "更新成功",
            status: "success",
            duration: 2000,
            isClosable: true,
        })
    }

    function validateNickname(value) {
        let error
        if (!value?.trim()) {
            error = "昵称不能为空"
        }

        if (value?.length > config.user.nicknameMaxLen) {
            error = `长度不能超过${config.user.nicknameMaxLen}`
        }

        return error
    }

    function validateEmail(value) {
        let email = value?.trim()
        let error

        if (email?.length > config.user.usernameMaxLen) {
            error = `长度不能超过${config.user.usernameMaxLen}`
            return error
        }

        if (email) {
            if (!validator.isEmail(email)) {
                error = "Email格式不合法"
                return error
            }
        }
        return error
    }


    function validateUrl(value, canBeEmpty = true) {
        let url = value?.trim()
        let error
        if (!canBeEmpty) {
            if (!url) {
                error = "url不能为空"
                return error
            }
        }

        if (url) {
            if (!validator.isURL(value)) {
                error = "URL格式不合法"
                return error
            }
        }

        return error
    }

    function validateLen(value) {
        let error
        if (value?.length > config.commonMaxlen) {
            error = `长度不能超过${config.commonMaxlen}`
        }

        return error
    }

    const transferOrg = async () => {
        await requestApi.post(`/org/transfer`,{orgID: router.query.org_id, ownerID: newOnwer})
        toast({
            description: "转移成功",
            status: "success",
            duration: 2000,
            isClosable: true,
        })
        router.push('/settings/orgs')
    }

    const Layout = isLargerThan1280 ? HStack : VStack
    return (
        <>
            <PageContainer>
                <Box display="flex">
                    <Sidebar routes={orgSettingLinks(router.query.org_id)} width={["120px", "120px", "250px", "250px"]} height="fit-content" title={`组织${org?.nickname}`} />
                    {org && <VStack alignItems="left" ml="4" width="100%">
                        <Formik
                            initialValues={org}
                            onSubmit={submitUser}
                        >
                            {(props) => (
                                <Form>
                                    <Card p={[2, 2, 6, 6]}>
                                        <Layout spacing={isLargerThan1280 ? "8" : "6"} alignItems={isLargerThan1280 ? 'top' : 'left'}>
                                            <Box width="100%">
                                                <VStack alignItems="left" spacing="6">
                                                    <Heading size="sm">基本信息</Heading>
                                                    <Box>
                                                        <FormLabel>Username</FormLabel>
                                                        <Input placeholder="enter your nick name" size="lg" value={org.username} disabled />
                                                    </Box>

                                                    <Field name="nickname" validate={validateNickname}>
                                                        {({ field, form }) => (
                                                            <FormControl isInvalid={form.errors.nickname && form.touched.nickname} >
                                                                <FormLabel>组织名称</FormLabel>
                                                                <Input {...field} placeholder="enter your nick name" size="lg" />
                                                                <FormErrorMessage>{form.errors.nickname}</FormErrorMessage>
                                                            </FormControl>

                                                        )}
                                                    </Field>
                                                    <Field name="email" validate={validateEmail}>
                                                        {({ field, form }) => (
                                                            <FormControl isInvalid={form.errors.email && form.touched.email} >
                                                                <FormLabel>联系邮箱</FormLabel>
                                                                <Input {...field} placeholder="" size="lg" />
                                                                <FormErrorMessage>{form.errors.email}</FormErrorMessage>
                                                            </FormControl>

                                                        )}
                                                    </Field>
                                                    <Field name="avatar" validate={(v) => validateUrl(v, false)}>
                                                        {({ field, form }) => (
                                                            <FormControl isInvalid={form.errors.avatar && form.touched.avatar} >
                                                                <FormLabel>头像设置</FormLabel>
                                                                <Input {...field} placeholder="输入图片链接，可以用github或postimg.cc当图片存储服务" size="lg" />
                                                                <FormErrorMessage>{form.errors.avatar}</FormErrorMessage>
                                                                {org.avatar && <Image width="120px" mt="4" src={org.avatar} />}
                                                            </FormControl>

                                                        )}
                                                    </Field>
                                                    <Field name="cover" validate={(v) => validateUrl(v, true)}>
                                                        {({ field, form }) => (
                                                            <FormControl isInvalid={form.errors.cover && form.touched.cover} >
                                                                <FormLabel>封面图片</FormLabel>
                                                                <Input {...field} placeholder="输入图片链接" size="lg" />
                                                                <FormErrorMessage>{form.errors.cover}</FormErrorMessage>
                                                                {org.cover && <Image width="100%" mt="4" src={org.cover} />}
                                                            </FormControl>

                                                        )}
                                                    </Field>
                                                </VStack>

                                                <VStack alignItems="left" spacing="6" mt="6">
                                                    <Heading size="sm">About You</Heading>
                                                    <Field name="tagline" validate={validateLen}>
                                                        {({ field, form }) => (
                                                            <FormControl isInvalid={form.errors.tagline && form.touched.tagline} >
                                                                <FormLabel>一句话描述组织</FormLabel>
                                                                <Input {...field} placeholder="I'm dev, working for google now" size="lg" />
                                                                <FormErrorMessage>{form.errors.tagline}</FormErrorMessage>
                                                            </FormControl>
                                                        )}
                                                    </Field>
                                                    <Field name="location" validate={validateLen}>
                                                        {({ field, form }) => (
                                                            <FormControl isInvalid={form.errors.location && form.touched.location} >
                                                                <FormLabel>Location</FormLabel>
                                                                <Input {...field} placeholder="Califonia, US" size="lg" />
                                                                <FormErrorMessage>{form.errors.location}</FormErrorMessage>
                                                            </FormControl>
                                                        )}
                                                    </Field>
                                                    <Field name="about" validate={validateLen}>
                                                        {({ field, form }) => (
                                                            <FormControl isInvalid={form.errors.about && form.touched.about} >
                                                                <FormLabel>详细介绍</FormLabel>
                                                                <Textarea {...field} placeholder="give us more info about you" size="lg" />
                                                                <FormErrorMessage>{form.errors.about}</FormErrorMessage>
                                                            </FormControl>
                                                        )}
                                                    </Field>
                                                    <Field name="skills" validate={validateLen}>
                                                        {({ field, form }) => (
                                                            <FormControl >
                                                                <FormLabel>组织技术栈</FormLabel>
                                                                <Tags tags={org.skills} onChange={(v) => form.values.skills = v} size="lg" />
                                                            </FormControl>
                                                        )}
                                                    </Field>
                                                </VStack>
                                            </Box>
                                            <Box width="100%" >
                                                <VStack alignItems="left" spacing="6">
                                                    <Heading size="sm">社交媒体</Heading>
                                                    <Field name="website" validate={validateUrl}>
                                                        {({ field, form }) => (
                                                            <FormControl isInvalid={form.errors.website && form.touched.website} >
                                                                <FormLabel>官方网站</FormLabel>
                                                                <Input {...field} placeholder="https://sunface.dev" size="lg" />
                                                                <FormErrorMessage>{form.errors.website}</FormErrorMessage>
                                                            </FormControl>
                                                        )}
                                                    </Field>
                                                    <Field name="github" validate={validateUrl}>
                                                        {({ field, form }) => (
                                                            <FormControl isInvalid={form.errors.github && form.touched.github} >
                                                                <FormLabel>Github</FormLabel>
                                                                <Input {...field} placeholder="https://github.com/sunface" size="lg" />
                                                                <FormErrorMessage>{form.errors.github}</FormErrorMessage>
                                                            </FormControl>
                                                        )}
                                                    </Field>
                                                    <Field name="twitter" validate={validateUrl}>
                                                        {({ field, form }) => (
                                                            <FormControl isInvalid={form.errors.twitter && form.touched.twitter} >
                                                                <FormLabel>Twitter</FormLabel>
                                                                <Input {...field} placeholder="https://twitter.com/imdotdev" size="lg" />
                                                                <FormErrorMessage>{form.errors.twitter}</FormErrorMessage>
                                                            </FormControl>
                                                        )}
                                                    </Field>
                                                    <Field name="zhihu" validate={validateUrl}>
                                                        {({ field, form }) => (
                                                            <FormControl isInvalid={form.errors.zhihu && form.touched.zhihu} >
                                                                <FormLabel>知乎</FormLabel>
                                                                <Input {...field} placeholder="https://www.zhihu.com/people/iSunface" size="lg" />
                                                                <FormErrorMessage>{form.errors.zhihu}</FormErrorMessage>
                                                            </FormControl>
                                                        )}
                                                    </Field>
                                                    <Field name="weibo" validate={validateUrl}>
                                                        {({ field, form }) => (
                                                            <FormControl isInvalid={form.errors.weibo && form.touched.weibo} >
                                                                <FormLabel>微博</FormLabel>
                                                                <Input {...field} placeholder="https://weibo.com/2734382464" size="lg" />
                                                                <FormErrorMessage>{form.errors.weibo}</FormErrorMessage>
                                                            </FormControl>
                                                        )}
                                                    </Field>
                                                    <Field name="facebook" validate={validateUrl}>
                                                        {({ field, form }) => (
                                                            <FormControl isInvalid={form.errors.facebook && form.touched.facebook} >
                                                                <FormLabel>Facebook</FormLabel>
                                                                <Input {...field} placeholder="" size="lg" />
                                                                <FormErrorMessage>{form.errors.facebook}</FormErrorMessage>
                                                            </FormControl>
                                                        )}
                                                    </Field>
                                                    <Field name="stackoverflow" validate={validateUrl}>
                                                        {({ field, form }) => (
                                                            <FormControl isInvalid={form.errors.stackoverflow && form.touched.stackoverflow} >
                                                                <FormLabel>StackOverflow</FormLabel>
                                                                <Input {...field} placeholder="" size="lg" />
                                                                <FormErrorMessage>{form.errors.stackoverflow}</FormErrorMessage>
                                                            </FormControl>
                                                        )}
                                                    </Field>
                                                </VStack>
                                            </Box>


                                        </Layout>

                                    </Card>
                                    <Box mt={6}>
                                        <Button
                                            colorScheme="cyan"
                                            variant="outline"
                                            type="submit"
                                            _focus={null}

                                        >
                                            更新信息
                                        </Button>
                                        <Button
                                            colorScheme="red"
                                            _focus={null}
                                            ml="4"
                                            onClick={onOpen}
                                        >
                                            转移组织
                                        </Button>
                                    </Box>
                                </Form>
                            )}
                        </Formik>
                    </VStack>}
                </Box>
            </PageContainer>

            <Modal isOpen={isOpen} onClose={onClose}>
                <ModalOverlay />
                {<ModalContent p="3">
                    <ModalBody mb="2">
                        <Text>转移组织</Text>
                        <Text mt="2" fontSize=".9rem" layerStyle="textSecondary">你必须是超级管理员才能完成此操作</Text>
                        <Input _focus={null} mt="4" placeholder="输入转移用户的ID，请找该用户询问" value={newOnwer} onChange={e => setNewOnwer(e.currentTarget.value)} />
                        <Alert status="error" mt="4">
                            <AlertIcon />
                            注意：该操作无法逆转，一旦转移，你将变为普通成员
                        </Alert>

                        <Button mt="4" colorScheme="teal" onClick={transferOrg}>开始转移</Button>
                    </ModalBody>
                </ModalContent>}
            </Modal>
        </>
    )
}
export default UserProfilePage