import React, { ReactNode } from 'react';
import styled from 'styled-components';
import { ContentWidth, Surface, Collapse, IconFile, IconEdit } from './ui';
import { Button, Alert, Link } from '@nemo-ui/core'
import { createRoute } from 'atomic-router';

const Wrapper = styled(ContentWidth)`
    margin: 0 auto;
`;
const Inner = styled(Surface)`
    width: 100%;
    box-shadow: 0px 1px 9px rgba(0, 0, 0, 0.09);
    border-radius: 8px;
    padding: 30px;
    display: flex;
    flex-direction: column;

    h1 {
        font-weight: 700;
        font-size: 32px;
        line-height: 44px;
        color: #000000;
        margin-bottom: 24px;
    }
`;
const Body = styled.div`
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;      
`;
const HistoryItemTitle = styled.div`
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;
    display: flex;
    align-items: center;
    gap: 6px;

    span {
        color: #0254AC;
    }
`;
const HistoryItemWrapper = styled.div`

    .head {
        padding: 30px 24px;
        display: flex;
        justify-content: space-between;

        table {
            tr {
                td {
                    padding: 14px 12px 10px;
                    min-width: 240px;
                }
                td:first-child {
                    font-weight: 500;
                    font-size: 14px;
                    line-height: 20px;
                    letter-spacing: 0%;
                    color: #616A73;
                }
                td:nth-child(2) {
                    font-weight: 600;
                    font-size: 14px;
                    line-height: 20px;
                    letter-spacing: 0%;
                }
            }
        }
        & > div {
            max-width: 400px;
        }
    }
    .body {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
`;


const Page: React.FC = () => {
    return (
        <Wrapper>
            <Inner>
                <h1>История сгенерированных документов</h1>
                <Body>
                    <Collapse
                      title={
                            <HistoryItemTitle>
                                <IconFile />
                                <p>
                                    Sym4.Аналитические сервисы - <span>Название страницы</span> - Спецификация Backend
                                </p>
                            </HistoryItemTitle>
                        }
                    >
                        <HistoryItemWrapper>
                            <div
                              className="head"
                            >
                                <table>
                                    <tbody>
                                        <tr>
                                            <td>Тип шаблона: </td>
                                            <td>Спецификация Backend</td>
                                        </tr>
                                        <tr>
                                            <td>Имя страницы:</td>
                                            <td>Название страницы</td>
                                        </tr>
                                        <tr>
                                            <td>Проект:</td>
                                            <td>VN2328 Авторазворачивание проектной среды Home</td>
                                        </tr>
                                        <tr>
                                            <td>Текущая версия документа:</td>
                                            <td>Версия 2</td>
                                        </tr>
                                        <tr>
                                            <td>Имя JIRA файла:</td>
                                            <td>jira_Интеграция_со_справочником_Продуктовые_линейки.txt</td>
                                        </tr>
                                        <tr>
                                            <td>Дополнительная ссылка:</td>
                                            <td><Link
                                              underline
                                                >Открыть</Link></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div>
                                    <Button
                                      variant="outlined"
                                      size="extraSmall"
                                      style={{ width: '100%', marginBottom: 24 }}
                                    >
                                        <IconEdit />
                                        &nbsp;
                                        Изменить параметры генерации
                                    </Button>
                                    <Alert
                                      variant="secondary"
                                      color="warning"
                                      style={{ margin: 0, }}
                                    >
                                        Документ откроется на главной странице для редактирования
                                    </Alert>
                                </div>
                            </div>
                        </HistoryItemWrapper>
                    </Collapse>
                    <Collapse
                      title={
                            <HistoryItemTitle>
                                <IconFile />
                                <p>
                                    Sym4.Аналитические сервисы - <span>Название страницы</span> - Спецификация Backend
                                </p>
                            </HistoryItemTitle>
                        }
                    >
                        123
                    </Collapse>
                    <Collapse
                      title={
                            <HistoryItemTitle>
                                <IconFile />
                                <p>
                                    Sym4.Аналитические сервисы - <span>Название страницы</span> - Спецификация Backend
                                </p>
                            </HistoryItemTitle>
                        }
                    >
                        123
                    </Collapse>
                </Body>

            </Inner>
        </Wrapper>
    )
}

const route = createRoute();

export const PageHistory = {
    route,
    Page,
};
