import Alert from 'Elements/Alert';
import Table from 'Elements/Table';
import { observer } from 'mobx-react-lite';
import { useStore } from 'stores/hooks';
import styled from 'styled-components';
import { Flex } from 'UIKit/grid';
import { columns } from './config';

const Grid = styled(Flex)`
  flex-direction: column;
`;

const TableWrapper = styled.div`
  td > * {
    margin: 0;
  }
`;

const Validation = observer(() => {
  const store = useStore();

  const messages = store.$tables.insurance.validation.getMessages();

  if (messages?.length) {
    return <Alert type="error" banner message={messages[0]} />;
  }

  return null;
});

function InsuranceTable() {
  const store = useStore();

  const { values } = store.$tables.insurance;

  return (
    <Grid>
      <TableWrapper>
        <Table
          size="small"
          pagination={false}
          columns={columns}
          dataSource={values}
          scroll={{
            x: true,
          }}
        />
      </TableWrapper>
      <Validation />
    </Grid>
  );
}

export default InsuranceTable;