import React, { useState } from 'react';
import styled from '@modern-js/runtime/styled';
import { useTranslation } from 'react-i18next';
import { uuid } from '@/utils/uuid';
import RightContent from '@/components/RightContent';

const ProLayout = styled.div<{
  width: number | string;
  topbarHeight: number | string;
  offset: number;
  top: number;
  fix: boolean;
}>`
  .ProContentLayout {
    position: ${props => (props.fix ? 'fixed' : 'content')};
    bottom: 0;
    left: 0;
    right: 0;
    width: ${props =>
      typeof props.width === 'number' ? `${props.width}px` : props.width};
    top: ${props => props.top}px;
    overflow-y: auto;
  }

  .icon {
    position: absolute;
    left: 34px;
  }

  .titleContainer {
    position: absolute;
    left: 64px;
  }

  .tabsContainer {
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    height: ${props =>
      typeof props.topbarHeight === 'number'
        ? `${props.topbarHeight}px`
        : props.topbarHeight};
    background: white;
    align-items: center;
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    width: 100%;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-content: center;
  }

  .tab {
    width: 100%;
    text-align: center;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    font-size: 16px;
  }

  .tab a {
    width: 100%;
    display: block;
  }
`;

export interface TabItem {
  name: string;
  content: React.ReactNode;
  onClick?: () => void;
}

export interface PageLayoutProps {
  title?: string;
  width: number | string;
  children?: React.ReactNode;
  offset?: number; // height subtract offset for small screen
  topbarTabs?: TabItem[];
  customTopSidebar?: React.ReactNode[]; // if this is not undefined it will replace topSidebarTabs
  contentTopOffset?: number; // content top offset from the top of popup
  rightContentItems?: React.ReactNode[];
  topbarHeight?: number | string;
  fix?: boolean;
  icon?: string;
  onClick?: () => void;
}

const PageLayout: React.FC<PageLayoutProps> = ({
  title,
  width,
  children,
  offset = 0,
  customTopSidebar,
  topbarTabs,
  topbarHeight,
  contentTopOffset = 50,
  rightContentItems,
  icon,
  fix = true,
  onClick,
}) => {
  const [selectTab, setSelectTab] = useState(0);
  const { t } = useTranslation();
  return (
    <ProLayout
      width={width}
      offset={offset}
      top={contentTopOffset}
      onClick={() => onClick?.()}
      fix={fix}
      topbarHeight={topbarHeight || 40}
    >
      {customTopSidebar
        ? customTopSidebar
        : topbarTabs && (
            <>
              <div className="tabsContainer">
                {icon && <img className="icon" src={icon} />}
                {title && <div className="titleContainer">{t(title)}</div>}
                {topbarTabs.map((tab, tIdx) => (
                  <div
                    id={`tabs${tIdx}`}
                    key={`topSidebarTabs${uuid()}`}
                    className="tab"
                    style={{
                      borderBottom:
                        tIdx === selectTab ? '2px solid  #000' : '0px',
                      boxShadow:
                        tIdx === selectTab
                          ? 'none'
                          : '0 2px 0 rgb(135 134 134 / 16%)',
                      fontFamily:
                        tIdx === selectTab ? 'Poppins-SemiBold' : 'Poppins',
                    }}
                    onClick={_e => {
                      setSelectTab(tIdx);
                      tab.onClick?.();
                    }}
                  >
                    {tab.name}
                  </div>
                ))}
                {rightContentItems && (
                  <RightContent contents={rightContentItems} />
                )}
              </div>
              {topbarTabs.length > 0 && (
                <div className="tabsContetnt">
                  {topbarTabs[selectTab]?.content}
                </div>
              )}
            </>
          )}
      {React.Children.count(children) > 0 && (
        <div className="ProContentLayout">{children}</div>
      )}
    </ProLayout>
  );
};

export default PageLayout;
