import React from 'react';

import { styled, alpha } from '@mui/material/styles';
import { Button, Link, Box, Toolbar, AppBar, Container } from '@mui/material';

import logo from '../../assets/logo.png';

const SiteLogo = () => {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        width: '108px',
        height: '36px',
        overflow: 'hidden',
        justifyItems: 'center',
        background: `url(${logo})`,
        backgroundSize: '108px 108px',
        backgroundPosition: 'center center',
        borderRadius: '15px',
      }}
    />
  );
};

const StyledToolbar = styled(Toolbar)(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  flexShrink: 0,
  borderRadius: `calc(${theme.shape.borderRadius}px + 8px)`,
  backdropFilter: 'blur(24px)',
  border: '1px solid',
  borderColor: (theme.vars || theme).palette.divider,
  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.background.defaultChannel} / 0.4)` : alpha(theme.palette.background.default, 0.4),
  boxShadow: (theme.vars || theme).shadows[1],
  padding: '8px 12px',
}));

export const Header: React.FC = () => {
  return (
    <AppBar
      enableColorOnDark
      position="fixed"
      sx={{
        boxShadow: 0,
        bgcolor: 'transparent',
        backgroundImage: 'none',
        mt: 'calc(var(--template-frame-height, 0px) + 28px)',
      }}
    >
      <Container maxWidth="lg">
        <StyledToolbar disableGutters>
          <Box sx={{ display: { xs: 'none', md: 'flex', width: '100%' } }}>
            <SiteLogo />
            <Box sx={{ display: { xs: 'none', md: 'flex', width: '100%' } }}>
              <Button variant="text" color="info" size="small">
                <Link href="/" underline="none">
                  Главная
                </Link>
              </Button>
              <Button variant="text" color="info" size="small">
                <Link underline="none" href="/services">
                  Услуги
                </Link>
              </Button>
              <Button variant="text" color="info" size="small">
                <Link href="/news" underline="none">
                  Новости
                </Link>
              </Button>
              <Button variant="text" color="info" size="small">
                <Link href="/about" underline="none">
                  О нас
                </Link>
              </Button>
              <Button variant="text" color="info" size="small">
                <Link href="/#contacts" underline="none">
                  Контакты
                </Link>
              </Button>
              <Button variant="contained" color="info" size="small" sx={{ ml: 'auto' }}>
                Оставить заявку
              </Button>
            </Box>
          </Box>
        </StyledToolbar>
      </Container>
    </AppBar>
  );
};
