import { Space, Input } from 'antd';
import { TagOutlined } from '@ant-design/icons';
import {
  BasicLayoutProps,
  Settings as LayoutSettings,
} from '@ant-design/pro-layout';
import { ReactComponent as LogoImg } from '@/assets/logo.svg';

const { Search } = Input;

export const layout = ({
  initialState,
}: {
  initialState: { settings?: LayoutSettings; currentUser?: API.CurrentUser };
}): BasicLayoutProps => {
  return {
    logo: () => <LogoImg style={{ width: 160 }} />,
    headerRender: (props) => {
      return (
        <Space
          style={{
            position: 'relative',
            float: 'right',
            right: '2%',
            fontSize: '12px',
            fontStyle: 'italic',
          }}
        >
          <Search
            style={{ position: 'relative', top: '8px' }}
            placeholder="Lookup by Trace ID..."
            onSearch={(value: string) =>
              window.open(
                `https://jaeger.oauth.prod.aws.tidbcloud.com/trace/${value}`,
              )
            }
          />
          <TagOutlined style={{ color: '#1890ff' }} /> FASTER Development,
          FASTER Troubleshooting
        </Space>
      );
    },
    ...initialState?.settings,
  };
};