import { useState, useRef } from "react";

import useSWR from "swr";

import { getManyApisFetcher } from "services/generalService";
import { getById } from "services/remissionService";
import { PageHeader, Table, Modal, Button, Form, Input, Space, Drawer, Descriptions
} from 'antd';
import ContentHolder from '@app/components/utility/contentHolder';
//import Remission from "./Remissions";
import Highlighter from 'react-highlight-words';
import { SearchOutlined } from '@ant-design/icons';

import style from "./style.module.css";

//import Remission from "./Remissions";

const Roles = () => {

const { data, isLoading} = useSWR([
"/Remision/GetAllForDetails",
], getManyApisFetcher);

const [searchText, setSearchText] = useState('');

const [searchedColumn, setSearchedColumn] = useState('');
const [openHospital, setOpenHospital] = useState(false);
const [requisitionData, setRequisitionData] = useState(null);
const [open, setOpen] = useState(false);
const [form] = Form.useForm();
const searchInput = useRef(null);

const handleSearch = (selectedKeys, confirm, dataIndex) => {

confirm();
setSearchText(selectedKeys[0]);
setSearchedColumn(dataIndex);
};

const handleReset = (clearFilters) => {

clearFilters();
setSearchText('');
};

const showDrawer = async (remission) => {

let result = await getById(remission.id);
setRequisitionData(result);
console.log("reultado: " , result);
console.log("productos: " , requisitionData?.kits[0].productos);
setOpen(true);
};

const onClose = () => {

setOpen(false);
};

const getColumnSearchProps = (dataIndex) => ({

filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters,
close }) => (
<div
style={{
padding: 8,
}}
onKeyDown={(e) => e.stopPropagation()}
>
 <Input
ref={searchInput}
placeholder={`Search ${dataIndex}`}
value={selectedKeys[0]}
onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] :
[])}
onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
style={{
marginBottom: 8,
display: 'block',
}}
/>
<Space>
<Button
type="primary"
onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
icon={<SearchOutlined />}
size="small"
style={{
width: 90,
}}
>
Search
</Button>
<Button
onClick={() => clearFilters && handleReset(clearFilters)}
size="small"
style={{
width: 90,
}}
>
Reset
</Button>
<Button
type="link"
size="small"
onClick={() => {
close();
}}
>
close
</Button>
</Space>
</div>
),
filterIcon: (filtered) => (
<SearchOutlined
style={{
color: filtered ? '#1677ff' : undefined,
}}
/>
),
onFilter: (value, record) =>
record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
onFilterDropdownOpenChange: (visible) => {
if (visible) {
setTimeout(() => searchInput.current?.select(), 100);
}
},
 render: (text) =>
searchedColumn === dataIndex ? (
<Highlighter
highlightStyle={{
backgroundColor: '#ffc069',
padding: 0,
}}
searchWords={[searchText]}
autoEscape
textToHighlight={text ? text.toString() : ''}
/>
) : (
text
),
});

const handleCloseModal = () => {

setOpenHospital(false);
}

const handleSaveHospital = (props) => {

setOpenHospital(false);
}

const columns = [
{
title: "Id",
dataIndex: 'id',
key: 'id',
sorter: (a, b) => a.id - b.id,
...getColumnSearchProps('id'),
},
{
title: "Cliente",
key: 'cliente',
dataIndex: 'cliente',
onFilter: (value, record) => record.numero.includes(value),
sorter: (a, b) => a.numero - b.numero,
...getColumnSearchProps('cliente'),
},
{
title: "Origen",
key: 'AlmacenOrigen',
dataIndex: 'almacenOrigen',
onFilter: (value, record) => record.descripcion1.includes(value),

sorter: (a, b) => a.descripcion1 - b.descripcion1,

...getColumnSearchProps('AlmacenOrigen'),
},
{
title: "Destino",
key: 'destino',
dataIndex: 'almacenDestino',
onFilter: (value, record) => record.numero.includes(value),
sorter: (a, b) => a.numero - b.numero,
...getColumnSearchProps('AlmacenDestino'),
},
{
key: 'info',
 render: (_, record) => (
<>

<Button type="primary" onClick={()=> showDrawer(record)}>

Ver mas
</Button>
</>
),
},
];

const productsList = [
{
title: 'Descripción',
dataIndex: 'descripcion',
key: 'descripcion',
},
{
title: 'Lote',
dataIndex: 'lote',
key: 'lote',
},
{
title: 'numero de Producto',
dataIndex: 'numeroProducto',
key: 'numeroProducto',
},
{
title: 'Cantidad',
dataIndex: 'cantidad',
key: 'cantidad',
},
];

const kitsList = [
{
title: 'Descripción',
dataIndex: 'descripcion',
key: 'descripcion',
},
{
title: 'Cantidad',
dataIndex: 'cantidad',
key: 'cantidad',
},
];

return (
<>
<PageHeader
ghost={false}
title="Remisiones"
/>
<div className={style.container}>
<div className={style.row}>
<div>
Ultima Sincronizado: <b>{(data ?? [])[1]}</b>
</div>
 <div style={{textAlign: "right"}}>
</div>
</div>
<div className={style.row}>
<Table columns={columns} dataSource={(data ?? [])[0]}
isLoading={isLoading} />
</div>
</div>
<Modal
open={openHospital}
title="Agregar Hospital"
onCancel={handleCloseModal}
footer={[
<Button
onClick={handleCloseModal}
>
Cancel
</Button>,
<Button
onClick={form.submit}
type="primary"
>
Guardar
</Button>,
]}>
</Modal>
<Drawer width={760} title="Detalle de Remisión" onClose={onClose}
open={open} >
<Descriptions column={2}>
<Descriptions.Item label="Almacen de
Destino">{requisitionData?.almacenDestino ?? ''}</Descriptions.Item>
<Descriptions.Item label="Almacen de
Origen">{requisitionData?.almacenOrigen ?? ''}</Descriptions.Item>
<Descriptions.Item label="Aortic">{requisitionData?.aortic ??
''}</Descriptions.Item>
<Descriptions.Item label="CreatedAt">{requisitionData?.createdAt ??
''}</Descriptions.Item>
<Descriptions.Item label="Estatus">{requisitionData?.estatus ??
''}</Descriptions.Item>
<Descriptions.Item label="Folio del
Cliente">{requisitionData?.folioCliente ?? ''}</Descriptions.Item>
<Descriptions.Item label="Nombre del
Cliente">{requisitionData?.nombreCliente ?? ''}</Descriptions.Item>
<Descriptions.Item label="Medico">{requisitionData?.medico ??
''}</Descriptions.Item>
<Descriptions.Item label="Observaciones
Terumo">{requisitionData?.observacionesTerumo ?? ''}</Descriptions.Item>
<Descriptions.Item
label="Hospital">{requisitionData?.nombreHospital ?? ''}</Descriptions.Item>
<Descriptions.Item label="SubTotal">{requisitionData?.subtotal ??
''}</Descriptions.Item>
<Descriptions.Item label="Total">{requisitionData?.total ??
''}</Descriptions.Item>
<Descriptions.Item label="Productos "></Descriptions.Item>
</Descriptions>
<Table dataSource={requisitionData?.productos} columns={productsList}
pagination={false} />
<Descriptions column={2}>
{/* <Descriptions.Item label="Kits">{requisitionData?.kits ??
''}</Descriptions.Item> */}
<Descriptions.Item label="Kits: "></Descriptions.Item>
</Descriptions>
<Table
columns={kitsList} expandable={{
expandedRowRender: (record) => (
<Table dataSource={requisitionData?.kits.productos}
columns={productsList} pagination={false} />
),
rowExpandable: (record) => (
<Table dataSource={requisitionData?.kits.productos}
columns={productsList} pagination={false} />
),
}} dataSource={requisitionData?.kits} pagination={false}
/>
<Table dataSource={requisitionData?.kits.productos}
columns={productsList} pagination={false} />
</Drawer>
</>
);
}

export default Roles;