import { t } from '@lingui/macro';
import { Button, message, Upload, Input, Table  } from 'antd';
import { SbtPageHeader } from 'components/page-header';
import { useState } from 'react';
import { Layout } from 'antd';
import FileViewer from '@cyntler/react-doc-viewer';
const { Sider, Content } = Layout;

const contentStyle: React.CSSProperties = {
  textAlign: 'center',
  color: '#fff',
  backgroundColor: '#efefef',
};

const siderStyle: React.CSSProperties = {
  backgroundColor: '#fafafa',
  padding: 10,
  width: 200,
};


const fileList = [
  {
    name: "invoice.pdf",
    url: "/dummpy.pdf",
    type: "invoice",
    isBadQuality: false,
  },
  {
    name: "invoice.pdf",
    url: "/dummpy.pdf",
    type: "imei",
    isBadQuality: true,
  }
]

const dataSource = [
  {
    key: '1',
    value: 'Mike',
  },
  {
    key: '2',
    value: 'Mike',
  },
  {
    key: '3',
    value: 'Mike',
  },
];

const columns = [
  {
    title: 'Key',
    dataIndex: 'key',
    key: 'key',
  },
  {
    title: 'Predicted',
    dataIndex: 'value',
    key: 'value',
  },
  {
    title: 'Submitted',
    dataIndex: 'value',
    key: 'value',
  },
  {
    title: 'Revised',
    dataIndex: 'value',
    key: 'value',
  },
];


const FileCard = ({ file, isSelected, onClick }) => {
  return (
    <div style={{
      border: '1px solid #ccc',
      width: '200px',
      backgroundColor: isSelected? '#d4ecff' : '#fff',
      padding: '4px 8px',
      marginRight: '4px',
      marginTop: '4px',
    }} onClick={onClick}>
      <div>
        <span style={{
          fontSize: '12px',
          color: '#333',
          fontWeight: 'bold',
          padding: '4px 8px',
        }}>{file.type.toUpperCase()}</span>
        <span style={{
          fontSize: '12px',
          color: '#aaa',
          fontWeight: 'bold',
          padding: '4px 8px',
        }}>{file.name}</span>
      </div>
    </div>
  );

};

const InferencePage = () => {
  const [selectedFileId, setSelectedFileId] = useState(0);
  const selectFileByIndex = (index) => {
    setSelectedFileId(index);
  };

  return (
    <>
      {/* <SbtPageHeader
        title={t`Result Review`}
      /> */}
      <Layout style={{
        overflow: 'hidden',
        width: '100%',
        maxWidth: '100%',
        minHeight: 'calc(100vh - 200px)',
        display: 'flex',
        padding: '8px',
      }}>
        <Layout>
          <Content style={contentStyle}>
            <div style={{
              height: "450px",
              border: "1px solid #ccc",
              flexGrow: 0,
            }}>
              <FileViewer documents={
                [
                  { uri: "/dummy.pdf" }
                ]
              } config={{
                header: {
                  disableHeader: true,
                  disableFileName: true,
                  retainURLParams: true,
                },
                csvDelimiter: ",", // "," as default,
                pdfZoom: {
                  defaultZoom: 1.1, // 1 as default,
                  zoomJump: 0.2, // 0.1 as default,
                },
                pdfVerticalScrollByDefault: true, // false as default
              }} />
            </div>
            <div
              style={{
                width: "100%",
                display: "flex",
                flexDirection: "row",
                height: "100px",
              }}>
              {fileList.map((file, index) => (
                <FileCard key={index} file={file} isSelected={index === selectedFileId} onClick={
                  () => {
                    setSelectedFileId(index);
                  }
                }/>
              ))}
            </div>
          </Content>
          <Sider width="500px" style={siderStyle}>
            <h2 style={{margin: "0 0 10px 0"}}>Overview</h2>
            <Input size='small' addonBefore="Request ID" style={{marginBottom: "4px"}} readOnly/>
            <Input size='small' addonBefore="Redemption" style={{marginBottom: "4px"}} readOnly/>
            <Input size='small' addonBefore="Uploaded date" style={{marginBottom: "4px"}} readOnly/>
            <Input size='small' addonBefore="Request time" style={{marginBottom: "4px"}} readOnly/>
            <Input size='small' addonBefore="Processing time" style={{marginBottom: "4px"}} readOnly/>
            <div style={{marginBottom: "8px", marginTop: "8px", display: "flex"}}>
              <Button type="primary" size='middle'>Confirm result</Button>
            </div>
            <Table dataSource={dataSource} columns={columns} />
          </Sider>
        </Layout>
      </Layout>
    </>
  );
};

export default InferencePage;