import { MainButton } from "../../../UI/buttons/mainButton"
import { workSpaceNames } from "../../../../const/workspace/names"
import { useWorkSpaceStore } from "../../../../store"
import styled from "styled-components"
import ThemeButton from "../../../UI/buttons/toggletheme"

type Props = {
    from: 'reg' | 'helloWindow' | 'workSpace'
    onBack?: () => void
}

const Wrapper = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background: ${(props => props.theme.background)};
    padding: 50px;
    box-sizing: border-box;
`

const Content = styled.div`
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
    padding: 25px 50px;
    background: ${(props => props.theme.secondary)};
    border-radius: 18px;
`

const Listing = styled.div`
    display: flex;
    flex-direction: column;
    gap: 15px;
    
`

const List = styled.div`
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-left: 10px;
`

const Title = styled.div`
    font-size: 20px;
`

const SubTitle = styled.div`
    display: flex;
    flex-direction: column;
    gap: 10px;

    p{
        font-size: 18px;
    }

`

const Links = styled.div`
    display: flex;
    flex-direction: column;
    gap: 20px;
`

const LinkColumn = styled.div`
    display: flex;
    flex-direction: column;
    gap: 10px;
`


const LinkBlock = styled.div`
    display: flex;
    gap: 5px;
`

const Copyright = styled.div`
    width: 100%;
    text-align: center;
    margin-top: 50px;
`

const ButtonContainer = styled.div`
    width: 100%;
    display: flex;
    justifi-content: flex-start;
    align-items: center;
`

const MainTitle = styled.div`
    width: 100%;
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
    box-sizing: border-box;

    img{
        width: 40px;
        height: 40px;
    }
`
const Text = styled.div`
    display: flex;
    flex-direction: column;
    gap: 30px;
`

export default function About({ from, onBack }: Props) {
    const { setWorkModule } = useWorkSpaceStore()

    const getBackHandler = () => {
        switch (from) {
            case 'reg':
                return onBack
            case 'helloWindow':
                return () => setWorkModule(workSpaceNames[1])
            case 'workSpace':
                return () => setWorkModule(workSpaceNames[3])
            default:
                return undefined
        }
    }

    const backHandler = getBackHandler()
    const showBackButton = from !== 'reg' || (from === 'reg' && onBack)

    return (
        <Wrapper>
            <Content>

                <MainTitle>
                    <img src="./assets/images/gossys.png" alt="" />
                    <div style={{width: '100%', display: "flex", justifyContent: 'center'}}><h1>О приложении</h1></div>
                    
                </MainTitle>


                <Text>

                    <Title>
                        <p>Приложение ГоNets является минимально работоспособным кроссплатформенным продуктом (MVP) для демонстрации нашего подхода к управлению настройками ПК в корпоративной среде.</p>
                    </Title>


                    <Listing>
                        <p>Данное приложение умеет:</p>
                        <List>
                            <p>- Отображать в графическом виде активные сетевые ресурсы</p>
                            <p>- Настраивать сетевые параметры локального и удаленных сетевых ресурсов</p>
                            <p>- Отображать и изменять взаимодействие сетевых ресурсов с установленным Клиентом ГоNets</p>
                        </List>
                    </Listing>

                    <SubTitle>
                        <p>Программное обеспечение исключительно для ознакомления и домашнего использования.</p>
                        <p>Для коммерческого использования приобретите версию ГоNets-PRO (Подробная информация на странице продукта)</p>
                    </SubTitle>

                    <Links>
                        <LinkBlock>
                            <p>Ссылка на домашнюю страницу:</p>
                            <a href="https://gossys.dev/pages/projects/gonets">https://gossys.dev/pages/projects/gonets</a>
                        </LinkBlock>

                        <LinkBlock>
                            <p>Инструкции и информация:</p>
                            <a href="https://wiki.gossys.dev/ru/gonets">https://wiki.gossys.dev/ru/gonets</a>
                        </LinkBlock>

                        <LinkColumn>
                            <p>Распространяется под лицензией GosysPUB текущей версии.</p>
                            <LinkBlock>
                                <p>Полный текст актуальной лицензии:</p>
                                <a href="https://wiki.gossys.dev/ru/lic/GosysPUB">https://wiki.gossys.dev/ru/lic/GosysPUB</a>
                            </LinkBlock>
                        </LinkColumn>

                    </Links>

                    <Copyright>
                        <p>Разработано и поддерживается ООО «Гибридные Офисные Системы» 2024-2025 г. Все права защищены.</p>
                    </Copyright>

                </Text>


                <ButtonContainer>
                    {showBackButton && backHandler && (
                        <MainButton
                            title="Назад"
                            onClick={backHandler}
                            style={{ marginRight: '10px' }}
                        />
                    )}

                    {from == 'reg' &&
                        <ThemeButton />
                    }
                </ButtonContainer>
            </Content>

        </Wrapper>
    )
}